Show fullscreen text when reloading page

src/assets/css/root.styl

@@ -26,20 +26,22 @@ button_color(name, normal, hover, active, disabled)
     button_color('primary', #008746, #04b358, #044e2a, #448262);
     button_color('danger', #c10404, #e61d1d, #a26c6c, #df5656);
 
-    --bx-toast-z-index: 9999;
-    --bx-dialog-z-index: 9101;
-    --bx-dialog-overlay-z-index: 9100;
-    --bx-stats-bar-z-index: 9010;
-    --bx-mkb-pointer-lock-msg-z-index: 9000;
+    --bx-fullscreen-text-z-index: 9999;
+    --bx-toast-z-index: 6000;
+    --bx-dialog-z-index: 5000;
 
-    --bx-navigation-dialog-z-index: 8999;
-    --bx-navigation-dialog-overlay-z-index: 8998;
+    --bx-dialog-overlay-z-index: 4020;
+    --bx-stats-bar-z-index: 4010;
+    --bx-mkb-pointer-lock-msg-z-index: 4000;
+
+    --bx-navigation-dialog-z-index: 3010;
+    --bx-navigation-dialog-overlay-z-index: 3000;
 
     --bx-remote-play-popup-z-index: 2000;
 
     --bx-game-bar-z-index: 1000;
     --bx-wait-time-box-z-index: 100;
-    --bx-screenshot-animation-z-index: 1;
+    --bx-screenshot-animation-z-index: 10;
 }
 
 @font-face {
@@ -190,3 +192,22 @@ div[class*=SupportedInputsBadge] {
         font-weight: bold;
     }
 }
+
+
+.bx-fullscreen-text {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: #000000cc;
+    z-index: var(--bx-fullscreen-text-z-index);
+    line-height: 100vh;
+    color: #fff;
+    text-align: center;
+    font-weight: 400;
+    font-family: var(--bx-normal-font);
+    font-size: 1.3rem;
+    user-select: none;
+    -webkit-user-select: none;
+}

src/modules/ui/dialog/settings-dialog.ts

@@ -24,6 +24,7 @@ import { PrefKey, StorageKey } from "@/enums/pref-keys";
 import { getPref, getPrefDefinition, setPref } from "@/utils/settings-storages/global-settings-storage";
 import { SettingElement } from "@/utils/setting-element";
 import type { SettingDefinition } from "@/types/setting-definition";
+import { FullscreenText } from "../fullscreen-text";
 
 
 type SettingTabContentItem = Partial<{
@@ -69,7 +70,7 @@ export class SettingsNavigationDialog extends NavigationDialog {
     private $settings!: HTMLElement;
 
     private $btnReload!: HTMLElement;
-    private $btnGlobalReload!: HTMLElement;
+    private $btnGlobalReload!: HTMLButtonElement;
     private $noteGlobalReload!: HTMLElement;
 
     private renderFullSettings: boolean;
@@ -123,11 +124,7 @@ export class SettingsNavigationDialog extends NavigationDialog {
                     classes: ['bx-settings-reload-button', 'bx-gone'],
                     style: ButtonStyle.FOCUSABLE | ButtonStyle.FULL_WIDTH,
                     onClick: e => {
-                        const $target = (e.target as HTMLButtonElement).closest('button')!;
-                        $target.disabled = true;
-                        $target.firstElementChild!.textContent = t('settings-reloading');
-
-                        window.location.reload();
+                        this.reloadPage();
                     },
                 });
 
@@ -611,7 +608,13 @@ export class SettingsNavigationDialog extends NavigationDialog {
         }
     }
 
-    onUnmounted(): void {
+    private reloadPage() {
+        this.$btnGlobalReload.disabled = true;
+        this.$btnGlobalReload.firstElementChild!.textContent = t('settings-reloading');
+
+        this.hide();
+        FullscreenText.getInstance().show(t('settings-reloading'));
+        window.location.reload();
     }
 
     private renderTab(settingTab: SettingTab) {
@@ -855,8 +858,7 @@ export class SettingsNavigationDialog extends NavigationDialog {
                         icon: BxIcon.REFRESH,
                         style: ButtonStyle.FOCUSABLE | ButtonStyle.DROP_SHADOW,
                         onClick: e => {
-                            window.location.reload();
-                            this.dialogManager.hide();
+                            this.reloadPage();
                         },
                     }),
 

src/modules/ui/fullscreen-text.ts

@@ -0,0 +1,33 @@
+import { CE } from "@/utils/html";
+
+export class FullscreenText {
+    private static instance: FullscreenText;
+    public static getInstance(): FullscreenText {
+        if (!FullscreenText.instance) {
+            FullscreenText.instance = new FullscreenText();
+        }
+        return FullscreenText.instance;
+    }
+
+    $text: HTMLElement;
+
+    constructor() {
+        this.$text = CE('div', {
+            class: 'bx-fullscreen-text bx-gone',
+        });
+
+        document.documentElement.appendChild(this.$text);
+    }
+
+    show(msg: string) {
+        document.body.classList.add('bx-no-scroll');
+
+        this.$text.classList.remove('bx-gone');
+        this.$text.textContent = msg;
+    }
+
+    hide() {
+        document.body.classList.remove('bx-no-scroll');
+        this.$text.classList.add('bx-gone');
+    }
+}