buddy list: Add padding to progressive scrollings.

We add a padded div to our container for the buddy
list to give scrolling the illusion that we've
rendered every list item, while still letting
the browser do the heavy lifting instead of trying
to fake it out too much.

.eslintrc.json

@@ -152,6 +152,7 @@
         "presence": false,
         "user_search": false,
         "buddy_data": false,
+        "padded_widget": false,
         "buddy_list": false,
         "list_cursor": false,
         "activity": false,

frontend_tests/node_tests/activity.js

@@ -56,6 +56,9 @@ const _resize = {
     resize_page_components: () => {},
 };
 
+set_global('padded_widget', {
+    update_padding: () => {},
+});
 set_global('channel', _channel);
 set_global('compose_state', _compose_state);
 set_global('document', _document);

frontend_tests/node_tests/buddy_list.js

@@ -5,6 +5,10 @@ zrequire('buddy_list');
 
 set_global('blueslip', global.make_zblueslip());
 
+set_global('padded_widget', {
+    update_padding: () => {},
+});
+
 function init_simulated_scrolling() {
     set_global('message_viewport', {
         height: () => 550,
@@ -17,6 +21,8 @@ function init_simulated_scrolling() {
 
     $('#buddy_list_wrapper')[0] = elem;
 
+    $('#buddy_list_wrapper_padding').height = () => 0;
+
     return elem;
 }
 

static/js/buddy_list.js

@@ -6,6 +6,7 @@ var buddy_list = (function () {
     self.container_sel = '#user_presences';
     self.scroll_container_sel = '#buddy_list_wrapper';
     self.item_sel = 'li.user_sidebar_entry';
+    self.padding_sel = '#buddy_list_wrapper_padding';
 
     self.items_to_html = function (opts) {
         var user_info = opts.items;
@@ -94,6 +95,7 @@ var buddy_list = (function () {
         // as rendered.
 
         self.render_count += more_keys.length;
+        self.update_padding();
     };
 
     self.get_items = function () {
@@ -140,6 +142,7 @@ var buddy_list = (function () {
             self.render_count -= 1;
             var li = self.find_li({key: opts.key});
             li.remove();
+            self.update_padding();
         }
     };
 
@@ -220,6 +223,7 @@ var buddy_list = (function () {
             if (pos === self.render_count) {
                 self.render_count += 1;
                 self.container.append(html);
+                self.update_padding();
             }
             return;
         }
@@ -228,6 +232,7 @@ var buddy_list = (function () {
             self.render_count += 1;
             var li = self.find_li({key: other_key});
             li.before(html);
+            self.update_padding();
         }
     };
 
@@ -265,7 +270,8 @@ var buddy_list = (function () {
         height_to_fill += 10;
 
         while (self.render_count < self.keys.length) {
-            var bottom_offset = elem.scrollHeight - elem.scrollTop;
+            var padding_height = $(self.padding_sel).height();
+            var bottom_offset = elem.scrollHeight - elem.scrollTop - padding_height;
 
             if (bottom_offset > height_to_fill) {
                 break;
@@ -293,6 +299,15 @@ var buddy_list = (function () {
         });
     };
 
+    self.update_padding = function () {
+        padded_widget.update_padding({
+            shown_rows: self.render_count,
+            total_rows: self.keys.length,
+            content_sel: self.container_sel,
+            padding_sel: self.padding_sel,
+        });
+    };
+
     return self;
 }());
 

static/js/bundles/app.js

@@ -148,6 +148,7 @@ import "js/zulip.js";
 import "js/presence.js";
 import "js/user_search.js";
 import "js/buddy_data.js";
+import "js/padded_widget.js";
 import "js/buddy_list.js";
 import "js/list_cursor.js";
 import "js/activity.js";

static/js/padded_widget.js

@@ -0,0 +1,33 @@
+var padded_widget = (function () {
+
+var exports = {};
+
+exports.update_padding = function (opts) {
+    var content = $(opts.content_sel);
+    var padding = $(opts.padding_sel);
+    var total_rows = opts.total_rows;
+    var shown_rows = opts.shown_rows;
+    var hidden_rows = total_rows - shown_rows;
+
+    if (shown_rows === 0) {
+        padding.height(0);
+        return;
+    }
+
+    var ratio = hidden_rows / shown_rows;
+
+    var content_height = content.height();
+    var new_padding_height = ratio * content_height;
+
+    padding.height(new_padding_height);
+    padding.width(1);
+};
+
+
+return exports;
+
+}());
+if (typeof module !== 'undefined') {
+    module.exports = padded_widget;
+}
+window.padded_widget = padded_widget;

templates/zerver/app/right_sidebar.html

@@ -20,6 +20,7 @@
             </div>
             <div id="buddy_list_wrapper" class="scrolling_list">
                 <ul id="user_presences" class="filters"></ul>
+                <div id="buddy_list_wrapper_padding"></div>
             </div>
             {% if show_invites %}
             <a id="invite-user-link" href="#invite"><i class="fa fa-plus-circle" aria-hidden="true"></i>{{ _('Invite more users') }}</a>