Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

recent_topics: Show loading indicator before fetching initial messages. 

Hide the loading indicator after initial fetch for recent topics.
This commit is contained in:
Aman Agrawal 2022-02-25 05:08:08 +00:00 committed by Tim Abbott
parent 98c2038718
commit 5ae178b39c
7 changed files with 66 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend_tests/node_tests/message_fetch.js
View File

@ -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,

6
static/js/message_fetch.js
View File

@ -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,
});
}

14
static/js/recent_topics_ui.js
View File

@ -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

5
static/styles/dark_theme.css
View File

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

39
static/styles/recent_topics.css
View File

@ -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 {

2
static/templates/recent_topics_table.hbs
View File

@ -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>

9
templates/zerver/app/index.html
View File

@ -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">