refactor: Extract `message_feed_loading` module from `message_scroll`.

This new module allows us to remove dependency on `message_scroll` in `fetch_status`
and hence allowing us to migrate it to TypeScript.

tools/test-js-with-node

@@ -109,6 +109,7 @@ EXEMPT_FILES = make_set(
         "web/src/message_edit.js",
         "web/src/message_edit_history.js",
         "web/src/message_events.js",
+        "web/src/message_feed_loading.ts",
         "web/src/message_fetch.js",
         "web/src/message_list.js",
         "web/src/message_list_data.js",

web/src/fetch_status.js

@@ -1,4 +1,4 @@
-import * as message_scroll from "./message_scroll";
+import * as message_feed_loading from "./message_feed_loading";
 
 function max_id_for_messages(messages) {
     let max_id = 0;
@@ -32,7 +32,7 @@ export class FetchStatus {
     start_older_batch(opts) {
         this._loading_older = true;
         if (opts.update_loading_indicator) {
-            message_scroll.show_loading_older();
+            message_feed_loading.show_loading_older();
         }
     }
 
@@ -41,7 +41,7 @@ export class FetchStatus {
         this._found_oldest = opts.found_oldest;
         this._history_limited = opts.history_limited;
         if (opts.update_loading_indicator) {
-            message_scroll.hide_loading_older();
+            message_feed_loading.hide_loading_older();
         }
     }
 
@@ -60,7 +60,7 @@ export class FetchStatus {
     start_newer_batch(opts) {
         this._loading_newer = true;
         if (opts.update_loading_indicator) {
-            message_scroll.show_loading_newer();
+            message_feed_loading.show_loading_newer();
         }
     }
 
@@ -71,7 +71,7 @@ export class FetchStatus {
         this._loading_newer = false;
         this._found_newest = opts.found_newest;
         if (opts.update_loading_indicator) {
-            message_scroll.hide_loading_newer();
+            message_feed_loading.hide_loading_newer();
         }
         if (this._found_newest && this._expected_max_message_id > found_max_message_id) {
             // This expected_max_message_id logic is designed to

web/src/message_feed_loading.ts

@@ -0,0 +1,41 @@
+import $ from "jquery";
+
+import * as loading from "./loading";
+
+let loading_older_messages_indicator_showing = false;
+let loading_newer_messages_indicator_showing = false;
+
+export function show_loading_older(): void {
+    if (!loading_older_messages_indicator_showing) {
+        loading.make_indicator($("#loading_older_messages_indicator"), {abs_positioned: true});
+        loading_older_messages_indicator_showing = true;
+    }
+}
+
+export function hide_loading_older(): void {
+    if (loading_older_messages_indicator_showing) {
+        loading.destroy_indicator($("#loading_older_messages_indicator"));
+        loading_older_messages_indicator_showing = false;
+    }
+}
+
+export function show_loading_newer(): void {
+    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;
+    }
+}
+
+export function hide_loading_newer(): void {
+    if (loading_newer_messages_indicator_showing) {
+        $(".bottom-messages-logo").hide();
+        loading.destroy_indicator($("#loading_newer_messages_indicator"));
+        loading_newer_messages_indicator_showing = false;
+    }
+}
+
+export function hide_indicators(): void {
+    hide_loading_older();
+    hide_loading_newer();
+}

web/src/message_fetch.js

@@ -4,6 +4,7 @@ import {all_messages_data} from "./all_messages_data";
 import * as channel from "./channel";
 import {Filter} from "./filter";
 import * as huddle_data from "./huddle_data";
+import * as message_feed_loading from "./message_feed_loading";
 import * as message_helper from "./message_helper";
 import * as message_list from "./message_list";
 import * as message_lists from "./message_lists";
@@ -296,7 +297,7 @@ export function load_messages(opts, attempt = 1) {
                 // error in the xhr status. While we have empty narrow messages
                 // for many common errors, and those have nicer HTML formatting,
                 // we certainly don't for every possible 400 error.
-                message_scroll.hide_indicators();
+                message_feed_loading.hide_indicators();
 
                 if (
                     opts.msg_list === message_lists.current &&

web/src/message_scroll.js

@@ -3,7 +3,6 @@ import _ from "lodash";
 
 import * as compose_banner from "./compose_banner";
 import * as hash_util from "./hash_util";
-import * as loading from "./loading";
 import * as message_fetch from "./message_fetch";
 import * as message_lists from "./message_lists";
 import * as message_viewport from "./message_viewport";
@@ -32,44 +31,6 @@ export function mark_keyboard_triggered_current_scroll() {
     keyboard_triggered_current_scroll = true;
 }
 
-let loading_older_messages_indicator_showing = false;
-let loading_newer_messages_indicator_showing = false;
-
-export function show_loading_older() {
-    if (!loading_older_messages_indicator_showing) {
-        loading.make_indicator($("#loading_older_messages_indicator"), {abs_positioned: true});
-        loading_older_messages_indicator_showing = true;
-    }
-}
-
-export function hide_loading_older() {
-    if (loading_older_messages_indicator_showing) {
-        loading.destroy_indicator($("#loading_older_messages_indicator"));
-        loading_older_messages_indicator_showing = false;
-    }
-}
-
-export function show_loading_newer() {
-    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;
-    }
-}
-
-export function hide_loading_newer() {
-    if (loading_newer_messages_indicator_showing) {
-        $(".bottom-messages-logo").hide();
-        loading.destroy_indicator($("#loading_newer_messages_indicator"));
-        loading_newer_messages_indicator_showing = false;
-    }
-}
-
-export function hide_indicators() {
-    hide_loading_older();
-    hide_loading_newer();
-}
-
 export function show_history_limit_notice() {
     $(".top-messages-logo").hide();
     $(".history-limited-box").show();

web/src/narrow.js

@@ -16,6 +16,7 @@ import * as hash_util from "./hash_util";
 import * as hashchange from "./hashchange";
 import {$t} from "./i18n";
 import * as message_edit from "./message_edit";
+import * as message_feed_loading from "./message_feed_loading";
 import * as message_fetch from "./message_fetch";
 import * as message_helper from "./message_helper";
 import * as message_list from "./message_list";
@@ -127,7 +128,7 @@ export function reset_ui_state() {
     // a function of the current narrow.
     narrow_banner.hide_empty_narrow_message();
     message_scroll.hide_top_of_narrow_notices();
-    message_scroll.hide_indicators();
+    message_feed_loading.hide_indicators();
     unread_ui.reset_unread_banner();
 }
 

web/tests/fetch_status.test.js

@@ -5,7 +5,7 @@ const {strict: assert} = require("assert");
 const {mock_esm, zrequire} = require("./lib/namespace");
 const {run_test} = require("./lib/test");
 
-mock_esm("../src/message_scroll", {
+mock_esm("../src/message_feed_loading", {
     hide_loading_older() {},
 
     show_loading_older() {},

web/tests/message_fetch.test.js

@@ -41,11 +41,13 @@ const stream_list = mock_esm("../src/stream_list", {
     maybe_scroll_narrow_into_view() {},
 });
 mock_esm("../src/message_scroll", {
+    update_top_of_narrow_notices() {},
+});
+mock_esm("../src/message_feed_loading", {
     show_loading_older: noop,
     hide_loading_older: noop,
     show_loading_newer: noop,
     hide_loading_newer: noop,
-    update_top_of_narrow_notices() {},
 });
 set_global("document", "document-stub");
 

web/tests/narrow_activate.test.js

@@ -25,6 +25,7 @@ const message_lists = mock_esm("../src/message_lists", {
     },
 });
 const message_scroll = mock_esm("../src/message_scroll");
+const message_feed_loading = mock_esm("../src/message_feed_loading");
 const message_view_header = mock_esm("../src/message_view_header");
 const notifications = mock_esm("../src/notifications");
 const search = mock_esm("../src/search");
@@ -83,8 +84,8 @@ function test_helper() {
     stub(compose_actions, "on_narrow");
     stub(compose_closed_ui, "update_reply_recipient_label");
     stub(hashchange, "save_narrow");
-    stub(message_scroll, "hide_indicators");
+    stub(message_feed_loading, "hide_indicators");
-    stub(message_scroll, "show_loading_older");
+    stub(message_feed_loading, "show_loading_older");
     stub(message_scroll, "hide_top_of_narrow_notices");
     stub(notifications, "redraw_title");
     stub(search, "update_button_visibility");
@@ -185,7 +186,7 @@ run_test("basics", () => {
 
     helper.assert_events([
         [message_scroll, "hide_top_of_narrow_notices"],
-        [message_scroll, "hide_indicators"],
+        [message_feed_loading, "hide_indicators"],
         [compose_banner, "clear_message_sent_banners"],
         [notifications, "redraw_title"],
         [unread_ops, "process_visible"],