diff --git a/frontend_tests/node_tests/message_fetch.js b/frontend_tests/node_tests/message_fetch.js index c65c212678..1e38fa4070 100644 --- a/frontend_tests/node_tests/message_fetch.js +++ b/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); diff --git a/static/js/message_fetch.js b/static/js/message_fetch.js index f591422508..d55ee89fb6 100644 --- a/static/js/message_fetch.js +++ b/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, diff --git a/static/js/message_scroll.js b/static/js/message_scroll.js index 6d5b905e78..703df3769a 100644 --- a/static/js/message_scroll.js +++ b/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, }); } diff --git a/static/styles/night_mode.scss b/static/styles/night_mode.scss index 100a36dff1..2b9d2e5cbd 100644 --- a/static/styles/night_mode.scss +++ b/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%); diff --git a/static/styles/zulip.scss b/static/styles/zulip.scss index b9c776a206..e63b49748f 100644 --- a/static/styles/zulip.scss +++ b/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; diff --git a/templates/zerver/app/home.html b/templates/zerver/app/home.html index 85acc0f8d7..923a0348eb 100644 --- a/templates/zerver/app/home.html +++ b/templates/zerver/app/home.html @@ -162,7 +162,17 @@
-
+
+ +
+