Further performance improvements, show indicator while game is saving

src/js/game/hud/parts/game_menu.js

@@ -5,6 +5,7 @@ import { enumNotificationType } from "./notifications";
 import { T } from "../../../translations";
 import { KEYMAPPINGS } from "../../key_action_mapper";
 import { DynamicDomAttach } from "../dynamic_dom_attach";
+import { TrackedState } from "../../../core/tracked_state";
 
 export class HUDGameMenu extends BaseHUDPart {
     createElements(parent) {
@@ -97,12 +98,17 @@ export class HUDGameMenu extends BaseHUDPart {
 
     initialize() {
         this.root.signals.gameSaved.add(this.onGameSaved, this);
+
+        this.trackedIsSaving = new TrackedState(this.onIsSavingChanged, this);
     }
 
     update() {
         let playSound = false;
         let notifications = new Set();
 
+        // Check whether we are saving
+        this.trackedIsSaving.set(!!this.root.gameState.currentSavePromise);
+
         // Update visibility of buttons
         for (let i = 0; i < this.visibilityToUpdate.length; ++i) {
             const { condition, domAttach } = this.visibilityToUpdate[i];
@@ -154,6 +160,10 @@ export class HUDGameMenu extends BaseHUDPart {
         });
     }
 
+    onIsSavingChanged(isSaving) {
+        this.saveButton.classList.toggle("saving", isSaving);
+    }
+
     onGameSaved() {
         this.saveButton.classList.toggle("animEven");
         this.saveButton.classList.toggle("animOdd");

src/js/game/hud/parts/notifications.js

@@ -1,56 +1,55 @@
-import { BaseHUDPart } from "../base_hud_part";
-import { makeDiv } from "../../../core/utils";
-import { T } from "../../../translations";
-import { IS_DEMO } from "../../../core/config";
-
-/** @enum {string} */
-export const enumNotificationType = {
-    saved: "saved",
-    upgrade: "upgrade",
-    success: "success",
-};
-
-const notificationDuration = 3;
-
-export class HUDNotifications extends BaseHUDPart {
-    createElements(parent) {
-        this.element = makeDiv(parent, "ingame_HUD_Notifications", [], ``);
-    }
-
-    initialize() {
-        this.root.hud.signals.notification.add(this.onNotification, this);
-
-        /** @type {Array<{ element: HTMLElement, expireAt: number}>} */
-        this.notificationElements = [];
-
-        // Automatic notifications
-        this.root.signals.gameSaved.add(() =>
-            this.onNotification(T.ingame.notifications.gameSaved, enumNotificationType.saved)
-        );
-    }
-
-    /**
-     * @param {string} message
-     * @param {enumNotificationType} type
-     */
-    onNotification(message, type) {
-        const element = makeDiv(this.element, null, ["notification", "type-" + type], message);
-        element.setAttribute("data-icon", "icons/notification_" + type + ".png");
-
-        this.notificationElements.push({
-            element,
-            expireAt: this.root.time.realtimeNow() + notificationDuration,
-        });
-    }
-
-    update() {
-        const now = this.root.time.realtimeNow();
-        for (let i = 0; i < this.notificationElements.length; ++i) {
-            const handle = this.notificationElements[i];
-            if (handle.expireAt <= now) {
-                handle.element.remove();
-                this.notificationElements.splice(i, 1);
-            }
-        }
-    }
-}
+import { makeDiv } from "../../../core/utils";
+import { T } from "../../../translations";
+import { BaseHUDPart } from "../base_hud_part";
+
+/** @enum {string} */
+export const enumNotificationType = {
+    saved: "saved",
+    upgrade: "upgrade",
+    success: "success",
+};
+
+const notificationDuration = 3;
+
+export class HUDNotifications extends BaseHUDPart {
+    createElements(parent) {
+        this.element = makeDiv(parent, "ingame_HUD_Notifications", [], ``);
+    }
+
+    initialize() {
+        this.root.hud.signals.notification.add(this.onNotification, this);
+
+        /** @type {Array<{ element: HTMLElement, expireAt: number}>} */
+        this.notificationElements = [];
+
+        // Automatic notifications
+        this.root.signals.gameSaved.add(() =>
+            this.onNotification(T.ingame.notifications.gameSaved, enumNotificationType.saved)
+        );
+    }
+
+    /**
+     * @param {string} message
+     * @param {enumNotificationType} type
+     */
+    onNotification(message, type) {
+        const element = makeDiv(this.element, null, ["notification", "type-" + type], message);
+        element.setAttribute("data-icon", "icons/notification_" + type + ".png");
+
+        this.notificationElements.push({
+            element,
+            expireAt: this.root.time.realtimeNow() + notificationDuration,
+        });
+    }
+
+    update() {
+        const now = this.root.time.realtimeNow();
+        for (let i = 0; i < this.notificationElements.length; ++i) {
+            const handle = this.notificationElements[i];
+            if (handle.expireAt <= now) {
+                handle.element.remove();
+                this.notificationElements.splice(i, 1);
+            }
+        }
+    }
+}