From 5ae178b39c708a5767991038f5c9ee2fb94b1bbc Mon Sep 17 00:00:00 2001 From: Aman Agrawal Date: Fri, 25 Feb 2022 05:08:08 +0000 Subject: [PATCH] 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 | 2 ++ static/js/message_fetch.js | 6 ++++ static/js/recent_topics_ui.js | 14 ++++++++ static/styles/dark_theme.css | 7 ++-- static/styles/recent_topics.css | 39 ++++++++++++++++------ static/templates/recent_topics_table.hbs | 2 +- templates/zerver/app/index.html | 9 +++++ 7 files changed, 66 insertions(+), 13 deletions(-) diff --git a/frontend_tests/node_tests/message_fetch.js b/frontend_tests/node_tests/message_fetch.js index f3551442c6..fb4a564723 100644 --- a/frontend_tests/node_tests/message_fetch.js +++ b/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, diff --git a/static/js/message_fetch.js b/static/js/message_fetch.js index c9e536dff0..8090326e16 100644 --- a/static/js/message_fetch.js +++ b/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, }); } diff --git a/static/js/recent_topics_ui.js b/static/js/recent_topics_ui.js index 247f4e817c..9c914e9dd3 100644 --- a/static/js/recent_topics_ui.js +++ b/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 diff --git a/static/styles/dark_theme.css b/static/styles/dark_theme.css index 28e6e595e6..636ea122c7 100644 --- a/static/styles/dark_theme.css +++ b/static/styles/dark_theme.css @@ -1131,8 +1131,11 @@ body.dark-theme { color: hsl(200, 79%, 66%); } - #loading_older_messages_indicator path { - fill: hsl(0, 0%, 100%); + #loading_older_messages_indicator, + #recent_topics_loading_messages_indicator { + path { + fill: hsl(0, 0%, 100%); + } } .small_square_button { diff --git a/static/styles/recent_topics.css b/static/styles/recent_topics.css index 643bcd9bd9..b1d0c1a08c 100644 --- a/static/styles/recent_topics.css +++ b/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 { diff --git a/static/templates/recent_topics_table.hbs b/static/templates/recent_topics_table.hbs index b5eca45881..ee1ac08503 100644 --- a/static/templates/recent_topics_table.hbs +++ b/static/templates/recent_topics_table.hbs @@ -19,6 +19,6 @@ {{t 'Time' }} - + diff --git a/templates/zerver/app/index.html b/templates/zerver/app/index.html index b04969cb79..6bfb41929c 100644 --- a/templates/zerver/app/index.html +++ b/templates/zerver/app/index.html @@ -129,6 +129,15 @@
+
+ +
+