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.

web/src/message_edit_history.ts

@@ -8,6 +8,7 @@ import render_message_history_overlay from "../templates/message_history_overlay
 import {exit_overlay} from "./browser_history";
 import * as channel from "./channel";
 import {$t, $t_html} from "./i18n";
+import * as loading from "./loading";
 import * as message_lists from "./message_lists";
 import type {Message} from "./message_store";
 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;
 }
 
+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 {
     $("#message-edit-history-overlay-container").html(render_message_history_overlay());
     open_overlay();
+    show_loading_indicator();
     void channel.get({
         url: "/json/messages/" + message.id + "/history",
         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,
             });
             $("#message-history-overlay").attr("data-message-id", message.id);
+            hide_loading_indicator();
             $("#message-history-overlay .overlay-messages-list").append($(rendered_list_html));
 
             // Pass the history through rendered_markdown.ts
@@ -235,6 +252,7 @@ export function fetch_and_render_message_history(message: Message): void {
                 xhr,
                 $("#message-history-overlay #message-history-error"),
             );
+            hide_loading_indicator();
             $("#message-history-error").show();
         },
     });

web/styles/message_edit_history.css

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

web/templates/message_history_overlay.hbs

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