diff --git a/templates/zephyr/home.html b/templates/zephyr/home.html index ab4913d215..16b75b2f94 100644 --- a/templates/zephyr/home.html +++ b/templates/zephyr/home.html @@ -3,6 +3,9 @@
+ + +
Loading...


diff --git a/templates/zephyr/index.html b/templates/zephyr/index.html index 542f1e77de..21e94a20ae 100644 --- a/templates/zephyr/index.html +++ b/templates/zephyr/index.html @@ -25,6 +25,7 @@ + diff --git a/zephyr/static/js/zephyr.js b/zephyr/static/js/zephyr.js index 52481e0105..cb5eaf439f 100644 --- a/zephyr/static/js/zephyr.js +++ b/zephyr/static/js/zephyr.js @@ -5,9 +5,14 @@ zephyr_json: false, initial_pointer: false, email: false, class_list: false, instance_list: false, people_list: false */ -// Compile Handlebars templates. +var loading_spinner; var templates = {}; $(function () { + // Display loading indicator. This disappears after the first + // get_updates_longpoll completes. + loading_spinner = new Spinner().spin($('#loading_spinner')[0]); + + // Compile Handlebars templates. templates.zephyr = Handlebars.compile($("#template_zephyr").html()); templates.subscription = Handlebars.compile($("#template_subscription").html()); }); @@ -758,6 +763,12 @@ function add_zephyr_metadata(dummy, zephyr) { function add_messages(zephyrs) { $.each(zephyrs, add_zephyr_metadata); + if (loading_spinner) { + loading_spinner.stop(); + $('#loading_indicator').hide(); + loading_spinner = undefined; + } + if (narrowed) add_to_table(zephyrs, 'zfilt', narrowed); diff --git a/zephyr/static/styles/zephyr.css b/zephyr/static/styles/zephyr.css index 1ed3b31818..0860b10f5a 100644 --- a/zephyr/static/styles/zephyr.css +++ b/zephyr/static/styles/zephyr.css @@ -336,3 +336,14 @@ input.send_zephyr { position: absolute; bottom: 0; } + +#loading_indicator { + margin-top: 40px; + font-size: 36px; + font-weight: bold; +} + +#loading_spinner { + width: 40px; + padding-right: 40px; +}