Add an interim "Loading..." indicator

We will probably re-style this eventually.

Also, the animation freezes during template rendering.  And the HTML is a "give
up and use tables" situation.

(imported from commit 847374b616dc7ce909834f23d5ed9522aa457254)

templates/zephyr/home.html

@@ -3,6 +3,9 @@
     <div class="span8">
             <div id="wrapper">
                 <div class="zephyr_list scrolling-tab" id="main_div">
+                    <table id="loading_indicator">
+                        <tr><td id="loading_spinner"></td><td>Loading...</td></tr>
+                    </table>
                     <br/><br/>
                     <table class="zephyr_table focused_table" id="zhome">
                         <tbody>

templates/zephyr/index.html

@@ -25,6 +25,7 @@
 <link href="/static/styles/pygments.css" rel="stylesheet">
 <script type="text/javascript" src="/static/third/jquery/jquery.form.js"></script>
 <script type="text/javascript" src="/static/third/handlebars/handlebars-1.0.rc.1.js"></script>
+<script type="text/javascript" src="/static/third/spin/spin.min.js"></script>
 <script type="text/javascript" src="/static/js/zephyr.js"></script>
 <script type="text/javascript" src="/static/js/hotkey.js"></script>
 

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);
 

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;
+}