From db40d62092ef0ea5dbb5d02fcbef05631e86b48c Mon Sep 17 00:00:00 2001
From: Brock Whittaker <brock@zulipchat.com>
Date: Thu, 20 Apr 2017 12:49:28 -0700
Subject: [PATCH] Change admin streams list to render progressively.

---
 static/js/settings_streams.js                 | 18 ++++++++++---
 .../settings/streams-list-admin.handlebars    | 26 +++++++++++++------
 2 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/static/js/settings_streams.js b/static/js/settings_streams.js
index 1c4dfdb168..b54d8b8e7e 100644
--- a/static/js/settings_streams.js
+++ b/static/js/settings_streams.js
@@ -19,10 +19,20 @@ function failed_listing_streams(xhr) {
 function populate_streams(streams_data) {
     var streams_table = $("#admin_streams_table").expectOne();
     all_streams = streams_data;
-    streams_table.find("tr.stream_row").remove();
-    _.each(streams_data.streams, function (stream) {
-        streams_table.append(templates.render("admin_streams_list", {stream: stream}));
-    });
+
+    list_render(streams_table, all_streams.streams, {
+        name: "admin_streams_list",
+        modifier: function (item) {
+            return templates.render("admin_streams_list", { stream: item });
+        },
+        filter: {
+            element: streams_table.closest(".settings-section").find(".search"),
+            callback: function (item, value) {
+                return item.name.toLowerCase().match(value);
+            },
+        },
+    }).init();
+
     loading.destroy_indicator($('#admin_page_streams_loading_indicator'));
 }
 
diff --git a/static/templates/settings/streams-list-admin.handlebars b/static/templates/settings/streams-list-admin.handlebars
index 9dc5c7007e..cc7d45f3d8 100644
--- a/static/templates/settings/streams-list-admin.handlebars
+++ b/static/templates/settings/streams-list-admin.handlebars
@@ -1,16 +1,26 @@
 <div id="admin-streams-list" class="settings-section" data-name="streams-list-admin">
-    <div class="settings-section-title"><i class="icon-vector-exchange settings-section-icon"></i>
-    {{t "Delete streams" }}</div>
+    <div class="settings-section-title">
+        <div class="table-title">
+            <i class="icon-vector-exchange settings-section-icon"></i>
+            {{t "Delete streams" }}
+        </div>
+        <input type="text" class="search" placeholder="{{t 'Search streams' }}" />
+        <div class="clear-float"></div>
+    </div>
+
 
     <div class="side-padded-container">
         <p class="admin-streams-note">{{#tr this}}Most stream administration is done on the <a href="/#streams">Streams page</a>.{{/tr}}</p>
     </div>
 
-    <table class="table table-condensed table-striped">
-        <tbody id="admin_streams_table" class="admin_stream_table">
-            <th>{{t "Name" }}</th>
-            <th>{{t "Actions" }}</th>
-        </tbody>
-    </table>
+    <div class="progressive-table-wrapper">
+        <table class="table table-condensed table-striped">
+            <thead>
+                <th>{{t "Name" }}</th>
+                <th>{{t "Actions" }}</th>
+            </thead>
+            <tbody id="admin_streams_table" class="admin_stream_table"></tbody>
+        </table>
+    </div>
     <div id="admin_page_streams_loading_indicator"></div>
 </div>