popup_banners: Redesign reloading application banner.

This commit redesigns the reloading application banner to use the new
banner styles.

Fixes #31289.

templates/zerver/app/index.html

@@ -201,7 +201,6 @@
             </span>
         </div>
         <div class="alert alert_sidebar alert-error home-error-bar" id="home-error"></div>
-        <div class="alert alert_sidebar alert-error home-error-bar" id="reloading-application"></div>
         <div class="alert alert_sidebar" id="request-progress-status-banner">
             <div class="alert-zulip-logo">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 773.12 773.12">

web/src/popup_banners.ts

@@ -5,6 +5,8 @@ import type {Banner} from "./banners.ts";
 import * as buttons from "./buttons.ts";
 import {$t} from "./i18n.ts";
 
+export type ReloadingReason = "reload" | "update";
+
 let retry_connection_interval: ReturnType<typeof setInterval> | undefined;
 let original_retry_delay_secs = 0;
 
@@ -87,6 +89,22 @@ const FOUND_MISSING_UNREADS_IN_CURRENT_NARROW: Banner = {
     custom_classes: "found-missing-unreads popup-banner",
 };
 
+const reloading_application_banner = (reason: ReloadingReason): Banner => {
+    let label = $t({defaultMessage: "Reloading…"});
+    if (reason === "update") {
+        label = $t({
+            defaultMessage: "The application has been updated; Reloading…",
+        });
+    }
+    return {
+        intent: "info",
+        label,
+        buttons: [],
+        close_button: false,
+        custom_classes: "reloading-application popup-banner",
+    };
+};
+
 export function open_found_missing_unreads_banner(on_jump_to_first_unread: () => void): void {
     banners.append(FOUND_MISSING_UNREADS_IN_CURRENT_NARROW, $("#popup_banners_wrapper"));
 
@@ -197,6 +215,15 @@ export function close_connection_error_popup_banner(
     fade_out_popup_banner($banner);
 }
 
+export function open_reloading_application_banner(reason: ReloadingReason): void {
+    const $banner = $("#popup_banners_wrapper").find(".reloading-application");
+    if ($banner.length > 0) {
+        // If the banner is already open, don't open it again.
+        return;
+    }
+    banners.append(reloading_application_banner(reason), $("#popup_banners_wrapper"));
+}
+
 export function initialize(): void {
     $("#popup_banners_wrapper").on(
         "click",

web/src/reload.ts

@@ -12,8 +12,9 @@ import type {LocalStorage} from "./localstorage.ts";
 import {localstorage} from "./localstorage.ts";
 import * as message_lists from "./message_lists.ts";
 import {page_params} from "./page_params.ts";
+import * as popup_banners from "./popup_banners.ts";
+import type {ReloadingReason} from "./popup_banners.ts";
 import * as reload_state from "./reload_state.ts";
-import * as ui_report from "./ui_report.ts";
 import * as util from "./util.ts";
 
 // Read https://zulip.readthedocs.io/en/latest/subsystems/hashchange-system.html
@@ -145,7 +146,7 @@ function delete_stale_tokens(ls: LocalStorage): void {
 function do_reload_app(
     send_after_reload: boolean,
     save_compose: boolean,
-    message_html: string,
+    reason: ReloadingReason,
 ): void {
     if (reload_state.is_in_progress()) {
         blueslip.log("do_reload_app: Doing nothing since reload_in_progress");
@@ -160,7 +161,7 @@ function do_reload_app(
     }
 
     // TODO: We need a better API for showing messages.
-    ui_report.message(message_html, $("#reloading-application"));
+    popup_banners.open_reloading_application_banner(reason);
     blueslip.log("Starting server requested page reload");
     reload_state.set_state_to_in_progress();
 
@@ -201,7 +202,12 @@ export function initiate({
     immediate = false,
     save_compose = true,
     send_after_reload = false,
-    message_html = "Reloading ...",
+    reason = "reload",
+}: {
+    immediate?: boolean;
+    save_compose?: boolean;
+    send_after_reload?: boolean;
+    reason?: ReloadingReason;
 }): void {
     if (reload_state.is_in_progress()) {
         // If we're already attempting to reload, there's nothing to do.
@@ -224,7 +230,7 @@ export function initiate({
         success() {
             server_reachable_check_failures = 0;
             if (immediate) {
-                do_reload_app(send_after_reload, save_compose, message_html);
+                do_reload_app(send_after_reload, save_compose, reason);
                 // We don't expect do_reload_app to return, but if it
                 // does, the fallthrough logic seems fine.
             }
@@ -264,7 +270,7 @@ export function initiate({
             const basic_idle_timeout = 1000 * 60 * 1 + random_variance;
 
             function reload_from_idle(): void {
-                do_reload_app(false, save_compose, message_html);
+                do_reload_app(false, save_compose, reason);
             }
 
             // Make sure we always do a reload eventually after
@@ -326,7 +332,7 @@ export function initiate({
                 server_reachable_check_failures,
             );
             setTimeout(() => {
-                initiate({immediate, save_compose, send_after_reload, message_html});
+                initiate({immediate, save_compose, send_after_reload, reason});
             }, retry_delay_secs * 1000);
         },
     });

web/src/server_events_dispatch.js

@@ -183,7 +183,7 @@ export function dispatch_normal_event(event) {
         case "web_reload_client": {
             const reload_options = {
                 save_compose: true,
-                message_html: "The application has been updated; reloading!",
+                reason: "update",
             };
             if (event.immediate) {
                 reload_options.immediate = true;