From 747df69de1867d18f06fde111f9c42e010a66ffa Mon Sep 17 00:00:00 2001
From: Zev Benjamin <zev@humbughq.com>
Date: Wed, 16 Jan 2013 16:02:49 -0500
Subject: [PATCH] Show a loading indicator while the subscriber list is loading

(imported from commit 83c6d64f665e82d1cff6e9654342d2a6c4bf6f36)
---
 zephyr/jstemplates/subscription.html | 1 +
 zephyr/static/js/subs.js             | 6 +++++-
 zephyr/static/styles/zephyr.css      | 4 ++++
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/zephyr/jstemplates/subscription.html b/zephyr/jstemplates/subscription.html
index 81069c21b6..5471a94535 100644
--- a/zephyr/jstemplates/subscription.html
+++ b/zephyr/jstemplates/subscription.html
@@ -26,6 +26,7 @@
         </div>
       </div>
       <div class="subscriber_list_container">
+        <div class="subscriber_list_loading_indicator"></div>
         <div class="alert alert-error hide"></div>
         <div class="alert alert-warning hide"></div>
         <ul>
diff --git a/zephyr/static/js/subs.js b/zephyr/static/js/subs.js
index b18f8cc54b..73ee135534 100644
--- a/zephyr/static/js/subs.js
+++ b/zephyr/static/js/subs.js
@@ -336,17 +336,20 @@ $(function () {
         var stream = sub_row.find('.subscription_name').text();
         var error_elem = sub_row.find('.subscriber_list_container .alert-error');
         var list = sub_row.find('.subscriber_list_container ul');
+        var indicator_elem = sub_row.find('.subscriber_list_loading_indicator');
 
         error_elem.addClass('hide');
         list.empty();
 
-        // TODO: Show a spinner while the list is loading
+        util.make_loading_indicator(indicator_elem);
+
         $.ajax({
             type: "POST",
             url: "/json/get_subscribers",
             dataType: 'json', // This seems to be ignored. We still get back an xhr.
             data: {stream: stream},
             success: function (data) {
+                util.destroy_loading_indicator(indicator_elem);
                 var subscribers = $.map(data.subscribers, function (elem) {
                     var person = people_dict[elem];
                     if (person === undefined) {
@@ -359,6 +362,7 @@ $(function () {
                 });
             },
             error: function (xhr) {
+                util.destroy_loading_indicator(indicator_elem);
                 error_elem.removeClass("hide").text("Could not fetch subscriber list");
             }
         });
diff --git a/zephyr/static/styles/zephyr.css b/zephyr/static/styles/zephyr.css
index c8c30d7ae0..8616ca2c52 100644
--- a/zephyr/static/styles/zephyr.css
+++ b/zephyr/static/styles/zephyr.css
@@ -610,6 +610,10 @@ table.floating_recipient {
     margin: 10px auto;
 }
 
+.subscriber_list_loading_indicator {
+    margin: 10px auto;
+}
+
 .table-striped thead th {
     background-color: #444;
     color: white;