recent_topics: Show loading indicator before fetching initial messages.

Hide the loading indicator after initial fetch for recent topics.

frontend_tests/node_tests/message_fetch.js

@@ -21,6 +21,8 @@ mock_esm("../../static/js/message_list_view", {
 
 mock_esm("../../static/js/recent_topics_ui", {
     process_messages: noop,
+    show_loading_indicator: noop,
+    hide_loading_indicator: noop,
 });
 mock_esm("../../static/js/ui_report", {
     hide_error: noop,

static/js/message_fetch.js

@@ -500,10 +500,16 @@ export function initialize(home_view_loaded) {
         filter: new Filter([{operator: "in", operand: "home"}]),
         excludes_muted_topics: true,
     });
+    // TODO: Ideally we'd have loading indicators for recent topics at
+    // both top and bottom be managed by load_messages, but that
+    // likely depends on other reorganizations of the early loading
+    // sequence.
+    recent_topics_ui.show_loading_indicator();
     load_messages({
         anchor: "newest",
         num_before: consts.recent_topics_initial_fetch_size,
         num_after: 0,
         msg_list: recent_topics_message_list,
+        cont: recent_topics_ui.hide_loading_indicator,
     });
 }

static/js/recent_topics_ui.js

@@ -8,6 +8,7 @@ import * as compose_closed_ui from "./compose_closed_ui";
 import * as hash_util from "./hash_util";
 import {$t} from "./i18n";
 import * as ListWidget from "./list_widget";
+import * as loading from "./loading";
 import {localstorage} from "./localstorage";
 import * as message_store from "./message_store";
 import * as message_util from "./message_util";
@@ -208,6 +209,19 @@ export function revive_current_focus() {
     return true;
 }
 
+export function show_loading_indicator() {
+    loading.make_indicator($("#recent_topics_loading_messages_indicator"));
+}
+
+export function hide_loading_indicator() {
+    $("#recent_topics_bottom_whitespace").hide();
+    loading.destroy_indicator($("#recent_topics_loading_messages_indicator"), {
+        abs_positioned: false,
+    });
+    // Show empty table text if there are no messages fetched.
+    $("#recent_topics_table tbody").addClass("required-text");
+}
+
 export function process_messages(messages) {
     // While this is inexpensive and handles all the cases itself,
     // the UX can be bad if user wants to scroll down the list as

static/styles/dark_theme.css

@@ -1131,8 +1131,11 @@ body.dark-theme {
         color: hsl(200, 79%, 66%);
     }
 
-    #loading_older_messages_indicator path {
+    #loading_older_messages_indicator,
-        fill: hsl(0, 0%, 100%);
+    #recent_topics_loading_messages_indicator {
+        path {
+            fill: hsl(0, 0%, 100%);
+        }
     }
 
     .small_square_button {

static/styles/recent_topics.css

@@ -81,16 +81,6 @@
         .table_fix_head table {
             /* To keep border properties to the thead th. */
             border-collapse: separate;
-            /* For visual reasons, in a message feed, we require a large
-             * bottom_whitespace to make it convenient to display new
-             * messages as they come in and prevent occluding the last
-             * message with an open compose box. Here, the bottom item
-             * is rarely interesting context for a message one is
-             * composing, but we do need at least 41px to allow the
-             * close-compose-box UI element (including border) to not
-             * overlap content. Add some more margin so that user
-             * can clearly see the end of the topics.
-             */
             margin-bottom: 100px;
         }
 
@@ -309,6 +299,35 @@
             }
         }
     }
+
+    #recent_topics_bottom_whitespace {
+        /* For visual reasons, in a message feed, we require a large
+         * bottom_whitespace to make it convenient to display new
+         * messages as they come in and prevent occluding the last
+         * message with an open compose box. Here, the bottom item
+         * is rarely interesting context for a message one is
+         * composing, but we do need at least 41px to allow the
+         * close-compose-box UI element (including border) to not
+         * overlap content. Add some more margin so that user
+         * can clearly see the end of the topics.
+         */
+        height: 120px;
+
+        #recent_topics_loading_messages_indicator,
+        .bottom-messages-logo {
+            display: block;
+            position: absolute;
+            top: 200px;
+            left: 0;
+            right: 0;
+            margin: auto;
+
+            .loading_indicator_spinner {
+                position: relative;
+                top: -7px;
+            }
+        }
+    }
 }
 
 #recent_topics_view {

static/templates/recent_topics_table.hbs

@@ -19,6 +19,6 @@
                 <th data-sort="numeric" data-sort-prop="last_msg_id" class="last_msg_time_header active descend">{{t 'Time' }}</th>
             </tr>
         </thead>
-        <tbody class="required-text" data-empty="{{t 'No topics match your current filter.' }}"></tbody>
+        <tbody data-empty="{{t 'No topics match your current filter.' }}"></tbody>
     </table>
 </div>

templates/zerver/app/index.html

@@ -129,6 +129,15 @@
                 <div id="recent_topics_view">
                     <div class="recent_topics_container">
                         <div id="recent_topics_table"></div>
+                        <div id="recent_topics_bottom_whitespace">
+                            <div class="bottom-messages-logo">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 773.12 773.12">
+                                    <circle cx="386.56" cy="386.56" r="386.56"/>
+                                    <path d="M566.66 527.25c0 33.03-24.23 60.05-53.84 60.05H260.29c-29.61 0-53.84-27.02-53.84-60.05 0-20.22 9.09-38.2 22.93-49.09l134.37-120c2.5-2.14 5.74 1.31 3.94 4.19l-49.29 98.69c-1.38 2.76.41 6.16 3.25 6.16h191.18c29.61 0 53.83 27.03 53.83 60.05zm0-281.39c0 20.22-9.09 38.2-22.93 49.09l-134.37 120c-2.5 2.14-5.74-1.31-3.94-4.19l49.29-98.69c1.38-2.76-.41-6.16-3.25-6.16H260.29c-29.61 0-53.84-27.02-53.84-60.05s24.23-60.05 53.84-60.05h252.54c29.61 0 53.83 27.02 53.83 60.05z"/>
+                                </svg>
+                            </div>
+                            <div id="recent_topics_loading_messages_indicator"></div>
+                        </div>
                     </div>
                 </div>
                 <div class="tab-pane" id="message_feed_container">