message view: Show indicator while fetching new messages.

We already have a loading indicator for fetching older
messages. Thus it makes sense to implement the same
for displaying newer messages.

We set the display of `bottom-messages-logo` to none,
to prevent displaying two loading indicators during
the initial message load.

Fixes #15060.

frontend_tests/node_tests/message_fetch.js

@@ -24,6 +24,10 @@ set_global('ui_report', {
 set_global('activity', {});
 set_global('channel', {});
 set_global('document', 'document-stub');
+set_global('message_scroll', {
+    show_loading_newer: noop,
+    hide_loading_newer: noop,
+});
 set_global('message_util', {});
 set_global('message_store', {});
 set_global('narrow_state', {});
@@ -310,6 +314,8 @@ run_test('loading_newer', () => {
 
         message_fetch.maybe_load_newer_messages({
             msg_list: msg_list,
+            show_loading: noop,
+            hide_loading: noop,
         });
 
         test_dup_new_fetch(msg_list);

static/js/message_fetch.js

@@ -311,6 +311,7 @@ exports.maybe_load_newer_messages = function (opts) {
         return;
     }
 
+    opts.show_loading();
     const anchor = exports.get_frontfill_anchor(msg_list).toFixed();
 
     exports.load_messages({
@@ -318,6 +319,9 @@ exports.maybe_load_newer_messages = function (opts) {
         num_before: 0,
         num_after: consts.forward_batch_size,
         msg_list: msg_list,
+        cont: function () {
+            opts.hide_loading();
+        },
     });
 };
 
@@ -347,6 +351,7 @@ exports.initialize = function () {
         }
 
         if (data.found_newest) {
+            message_scroll.hide_loading_newer();
             server_events.home_view_loaded();
             exports.start_backfilling_messages();
             return;
@@ -357,6 +362,7 @@ exports.initialize = function () {
         const messages = data.messages;
         const latest_id = messages[messages.length - 1].id;
 
+        message_scroll.show_loading_newer();
         exports.load_messages({
             anchor: latest_id.toFixed(),
             num_before: 0,

static/js/message_scroll.js

@@ -1,6 +1,7 @@
 let actively_scrolling = false;
 
 let loading_older_messages_indicator_showing = false;
+let loading_newer_messages_indicator_showing = false;
 exports.show_loading_older = function () {
     if (!loading_older_messages_indicator_showing) {
         loading.make_indicator($('#loading_older_messages_indicator'),
@@ -17,8 +18,27 @@ exports.hide_loading_older = function () {
     }
 };
 
+exports.show_loading_newer = function () {
+    if (!loading_newer_messages_indicator_showing) {
+        $(".bottom-messages-logo").show();
+        loading.make_indicator($('#loading_newer_messages_indicator'),
+                               {abs_positioned: true});
+        loading_newer_messages_indicator_showing = true;
+        floating_recipient_bar.hide();
+    }
+};
+
+exports.hide_loading_newer = function () {
+    if (loading_newer_messages_indicator_showing) {
+        $(".bottom-messages-logo").hide();
+        loading.destroy_indicator($("#loading_newer_messages_indicator"));
+        loading_newer_messages_indicator_showing = false;
+    }
+};
+
 exports.hide_indicators = function () {
     exports.hide_loading_older();
+    exports.hide_loading_newer();
 };
 
 exports.actively_scrolling = function () {
@@ -51,6 +71,8 @@ exports.scroll_finished = function () {
     if (message_viewport.at_bottom()) {
         message_fetch.maybe_load_newer_messages({
             msg_list: current_msg_list,
+            show_loading: exports.show_loading_newer,
+            hide_loading: exports.hide_loading_newer,
         });
     }
 

static/styles/night_mode.scss

@@ -618,7 +618,8 @@ on a dark background, and don't change the dark labels dark either. */
         background-color: hsl(212, 28%, 18%);
     }
 
-    .top-messages-logo {
+    .top-messages-logo,
+    .bottom-messages-logo {
         svg path {
             fill: hsl(214, 27%, 18%);
             stroke: hsl(214, 27%, 18%);

static/styles/zulip.scss

@@ -116,7 +116,12 @@ p.n-margin {
     }
 }
 
-.top-messages-logo {
+.bottom-messages-logo {
+    display: none;
+}
+
+.top-messages-logo,
+.bottom-messages-logo {
     width: 24px;
     height: 24px;
     margin: 0 auto 12px;
@@ -2011,16 +2016,19 @@ div.floating_recipient {
     font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
 }
 
-#loading_older_messages_indicator {
+#loading_older_messages_indicator,
+#loading_newer_messages_indicator {
     margin: 10px;
 }
 
-#loading_older_messages_indicator_box_container {
+#loading_older_messages_indicator_box_container,
+#loading_newer_messages_indicator_box_container {
     position: absolute;
     left: 50%;
 }
 
-#loading_older_messages_indicator_box {
+#loading_older_messages_indicator_box,
+#loading_newer_messages_indicator_box {
     position: relative;
     left: -50%;
     top: -43px;

templates/zerver/app/home.html

@@ -162,7 +162,17 @@
     </div>
     <div id="typing_notifications">
     </div>
-    <div id="bottom_whitespace"></div>
+    <div id="bottom_whitespace">
+        <div class="bottom-messages-logo">
+            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 40 40" version="1.1">
+                <g transform="translate(-297.14285,-466.64792)">
+                    <circle cx="317.14285" cy="486.64792" r="19.030317" style="stroke-width:1.93936479;"/>
+                    <path d="m309.24286 477.14791 14.2 0 1.6 3.9-11.2 11.9 9.6 0 1.6 3.2-14.2 0-1.6-3.9 11.2-11.9-9.6 0z"/>
+                </g>
+            </svg>
+        </div>
+        <div id="loading_newer_messages_indicator"></div>
+    </div>
 </div>