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

message_edit_history: Add loading spinner. 

Adds a loading spinner to the message history overlay,
improving the user experience by providing visual feedback while the
message edit history is loading.
This commit is contained in:
Mahhheshh 2024-03-29 19:33:06 +05:30 committed by Tim Abbott
parent 16bf8d3df6
commit 68646cacfc
3 changed files with 27 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
web/src/message_edit_history.ts
View File

@ -8,6 +8,7 @@ import render_message_history_overlay from "../templates/message_history_overlay
import {exit_overlay} from "./browser_history"; import {exit_overlay} from "./browser_history";
import * as channel from "./channel"; import * as channel from "./channel";
import {$t, $t_html} from "./i18n"; import {$t, $t_html} from "./i18n";
import * as loading from "./loading";
import * as message_lists from "./message_lists"; import * as message_lists from "./message_lists";
import type {Message} from "./message_store"; import type {Message} from "./message_store";
import * as messages_overlay_ui from "./messages_overlay_ui"; import * as messages_overlay_ui from "./messages_overlay_ui";
@ -93,9 +94,24 @@ function get_display_stream_name(stream_id: number): string {
return stream_name; return stream_name;
} }
function show_loading_indicator(): void {
loading.make_indicator($(".message-edit-history-container .loading_indicator"));
$(".message-edit-history-container .loading_indicator").addClass(
"overlay_loading_indicator_style",
);
}
function hide_loading_indicator(): void {
loading.destroy_indicator($(".message-edit-history-container .loading_indicator"));
$(".message-edit-history-container .loading_indicator").removeClass(
"overlay_loading_indicator_style",
);
}
export function fetch_and_render_message_history(message: Message): void { export function fetch_and_render_message_history(message: Message): void {
$("#message-edit-history-overlay-container").html(render_message_history_overlay()); $("#message-edit-history-overlay-container").html(render_message_history_overlay());
open_overlay(); open_overlay();
show_loading_indicator();
void channel.get({ void channel.get({
url: "/json/messages/" + message.id + "/history", url: "/json/messages/" + message.id + "/history",
data: {message_id: JSON.stringify(message.id)}, data: {message_id: JSON.stringify(message.id)},
@ -214,6 +230,7 @@ export function fetch_and_render_message_history(message: Message): void {
edited_messages: content_edit_history, edited_messages: content_edit_history,
}); });
$("#message-history-overlay").attr("data-message-id", message.id); $("#message-history-overlay").attr("data-message-id", message.id);
hide_loading_indicator();
$("#message-history-overlay .overlay-messages-list").append($(rendered_list_html)); $("#message-history-overlay .overlay-messages-list").append($(rendered_list_html));
// Pass the history through rendered_markdown.ts // Pass the history through rendered_markdown.ts
@ -235,6 +252,7 @@ export function fetch_and_render_message_history(message: Message): void {
xhr, xhr,
$("#message-history-overlay #message-history-error"), $("#message-history-overlay #message-history-error"),
); );
hide_loading_indicator();
$("#message-history-error").show(); $("#message-history-error").show();
}, },
}); });

8
web/styles/message_edit_history.css
View File

@ -54,4 +54,12 @@
display: none; display: none;
margin: 10px; margin: 10px;
} }
.overlay_loading_indicator_style {
width: 100% !important;
height: 100% !important;
display: flex;
justify-content: center;
align-items: center;
}
} }

1
web/templates/message_history_overlay.hbs
View File

@ -9,6 +9,7 @@
</div> </div>
<div class="message-edit-history-list overlay-messages-list"> <div class="message-edit-history-list overlay-messages-list">
</div> </div>
<div class="loading_indicator"></div>
<div id="message-history-error" class="alert"> <div id="message-history-error" class="alert">
</div> </div>
</div> </div>