Show a loading indicator on the subscriptions page

(imported from commit f5c4847e016921827354df09a544d98ceef16bee)

templates/zephyr/subscriptions.html

@@ -10,6 +10,7 @@
         <input type="submit" name="add_subscription" value="Subscribe" class="btn btn-primary" />
       </form>
       <div class="alert" id="subscriptions-status"></div>
+      <div id="subs_page_loading_indicator"></div>
       <form id="current_subscriptions" action="/json/subscriptions/remove"
             method="post" class="subscriptions">{% csrf_token %}
         <table class="table table-condensed table-striped">

zephyr/static/js/subs.js

@@ -144,14 +144,14 @@ exports.fetch_colors = function () {
 };
 
 exports.setup_page = function () {
-    // TODO: We really want to show a spinner while we're fetching
-    // the subs
+    util.make_loading_indicator($('#subs_page_loading_indicator'));
     $.ajax({
         type:     'POST',
         url:      '/json/subscriptions/list',
         dataType: 'json',
         timeout:  10*1000,
         success: function (data) {
+            util.destroy_loading_indicator($('#subs_page_loading_indicator'));
             $('#subscriptions_table tr').remove();
             removed_streams = {};
             if (data) {
@@ -168,6 +168,7 @@ exports.setup_page = function () {
             $('#streams').focus().select();
         },
         error: function (xhr) {
+            util.destroy_loading_indicator($('#subs_page_loading_indicator'));
             ui.report_error("Error listing subscriptions", xhr, $("#subscriptions-status"));
         }
     });

zephyr/static/styles/zephyr.css

@@ -606,6 +606,10 @@ table.floating_recipient {
     margin: 10px auto;
 }
 
+#subs_page_loading_indicator {
+    margin: 10px auto;
+}
+
 .table-striped thead th {
     background-color: #444;
     color: white;