Add ability to show/hide a "load more messages" spinner.

(imported from commit 611e53b2574ef50c9ab0a47fc2ebedd931a49dfd)

templates/zephyr/home.html

@@ -43,6 +43,9 @@
     <div class="message_list" id="main_div">
       <div id="top_whitespace"></div>
       <div id="top_narrowed_whitespace"></div>
+      <table id="load_more_messages_indicator">
+        <tr><td id="load_more_messages_spinner"></td></tr>
+      </table>
       <table id="loading_indicator">
         <tr><td id="loading_spinner"></td><td>Loading...</td></tr>
       </table>

zephyr/static/js/ui.js

@@ -335,6 +335,30 @@ exports.wait_for_gravatar = function () {
     poll_for_gravatar_update($.now(), $(".gravatar-profile").attr("src"));
 };
 
+var load_more_messages_spinner;
+exports.show_load_more_messages_spinner = function () {
+    if (load_more_messages_spinner === undefined) {
+        load_more_messages_spinner = new Spinner({
+            lines: 8,
+            length: 0,
+            width: 9,
+            radius: 9,
+            speed: 1.25,
+            shadow: false
+        }).spin($('#load_more_messages_spinner')[0]);
+        $("#load_more_messages_indicator").show();
+        hide_floating_recipient_bar();
+    }
+};
+
+exports.hide_load_more_messages_spinner = function() {
+    if (load_more_messages_spinner) {
+        load_more_messages_spinner.stop();
+        $("#load_more_messages_indicator").hide();
+        load_more_messages_spinner = undefined;
+    }
+};
+
 $(function () {
     // NB: This just binds to current elements, and won't bind to elements
     // created after ready() is called.

zephyr/static/styles/zephyr.css

@@ -525,3 +525,10 @@ table.floating_recipient {
 .cursor_pointer {
     cursor: pointer;
 }
+
+#load_more_messages_indicator {
+    display: none;
+    margin: 0 auto;
+    height: 50px;
+    padding-top: 30px;
+}