Change streams subscriber lists to render progressively.

static/js/stream_edit.js

@@ -148,7 +148,6 @@ function show_subscription_settings(sub_row) {
     if (!sub.render_subscribers) {
         return;
     }
-
     // fetch subscriber list from memory.
     var list = get_subscriber_list(sub_settings);
     alerts.addClass("hide");
@@ -157,18 +156,28 @@ function show_subscription_settings(sub_row) {
     var emails = [];
     sub.subscribers.each(function (o, i) {
         var email = people.get_person_from_user_id(i).email;
-        emails.push(format_member_list_elem(email));
+        emails.push(email);
     });
 
-    var list_html = emails.sort().reduce(function (accumulator, item) {
-        return accumulator + item;
-    }, "");
+    list_render(list, emails.sort(), {
+        name: "stream_subscribers/" + stream_id,
+        modifier: function (item) {
+            return format_member_list_elem(item);
+        },
+        filter: {
+            element: $("[data-stream-id='" + stream_id + "'] .search"),
+            callback: function (item, value) {
+                var person = people.get_by_email(item);
 
-    // wait for the next frame to append the list so other things can happen in
-    // the meanwhile.
-    window.requestAnimationFrame(function () {
-        list.append(list_html);
-    });
+                if (person) {
+                    var email = person.email.toLocaleLowerCase();
+                    var full_name = person.full_name.toLowerCase();
+
+                    return (email.indexOf(value) > -1 || full_name.indexOf(value) > -1);
+                }
+            },
+        },
+    }).init();
 
     sub_settings.find('input[name="principal"]').typeahead({
         source: people.get_realm_persons, // This is a function.

static/styles/subscriptions.css

@@ -352,8 +352,13 @@ form#add_new_subscription {
 }
 
 .subscriber_list_add {
+    width: 100%;
     margin: 10px auto;
-    text-align: center;
+    text-align: right;
+}
+
+.subscriber_list_add .search {
+    float: left;
 }
 
 .subscriber_list_add .form-inline {

static/templates/subscription_settings.handlebars

@@ -89,6 +89,7 @@
             <div class="sub_settings_title float-left">{{t "Stream membership" }}</div>
             <div class="subscriber_list_add float-right">
                 <form class="form-inline">
+                    <input type="text" class="search" placeholder="{{t 'Search subscribers' }}" />
                     <input type="text" name="principal" placeholder="{{t 'Email address' }}" value="" class="input-block" autocomplete="off" tabindex="-1" />
                     <input type="submit" name="add_subscriber" value="{{t 'Add' }}" class="btn btn-primary add-subscriber-button" tabindex="-1 "/>
                 </form>