From 02e08fdf1268d46740b42d4eec1d6c6a3acbdce1 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 3 Jan 2026 19:47:33 +0200
Subject: [PATCH] chore(client/save_indicator): address requested changes

---
 apps/client/src/services/spaced_update.ts     |  2 +-
 apps/client/src/widgets/layout/NoteBadges.tsx | 48 +++++++++----------
 apps/client/src/widgets/react/hooks.tsx       |  8 +++-
 3 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/apps/client/src/services/spaced_update.ts b/apps/client/src/services/spaced_update.ts
index 253cab63c4..3728ece78a 100644
--- a/apps/client/src/services/spaced_update.ts
+++ b/apps/client/src/services/spaced_update.ts
@@ -80,12 +80,12 @@ export default class SpacedUpdate {
             try {
                 await this.updater();
                 this.stateCallback?.("saved");
+                this.changed = false;
             } catch (e) {
                 this.stateCallback?.("error");
                 logError(getErrorMessage(e));
             }
             this.lastUpdated = Date.now();
-            this.changed = false;
         } else {
             // update isn't triggered but changes are still pending, so we need to schedule another check
             this.scheduleUpdate();
diff --git a/apps/client/src/widgets/layout/NoteBadges.tsx b/apps/client/src/widgets/layout/NoteBadges.tsx
index 8a45a3cae7..b4fba9e28a 100644
--- a/apps/client/src/widgets/layout/NoteBadges.tsx
+++ b/apps/client/src/widgets/layout/NoteBadges.tsx
@@ -113,30 +113,30 @@ export function SaveStatusBadge() {
     const saveState = useGetContextData("saveState");
     if (!saveState) return;
 
-    let icon: string;
-    let title: string;
-    let tooltip: string | undefined;
-    switch (saveState?.state) {
-        case "saved":
-            icon = "bx bx-check";
-            title = t("breadcrumb_badges.save_status_saved");
-            break;
-        case "saving":
-            icon = "bx bx-loader bx-spin";
-            title = t("breadcrumb_badges.save_status_saving");
-            tooltip = t("breadcrumb_badges.save_status_saving_tooltip");
-            break;
-        case "unsaved":
-            icon = "bx bx-pencil";
-            title = t("breadcrumb_badges.save_status_unsaved");
-            tooltip = t("breadcrumb_badges.save_status_unsaved_tooltip");
-            break;
-        case "error":
-            icon = "bx bxs-error";
-            title = t("breadcrumb_badges.save_status_error");
-            tooltip = t("breadcrumb_badges.save_status_error_tooltip");
-            break;
-    }
+    const stateConfig = {
+        saved: {
+            icon: "bx bx-check",
+            title: t("breadcrumb_badges.save_status_saved"),
+            tooltip: undefined
+        },
+        saving: {
+            icon: "bx bx-loader bx-spin",
+            title: t("breadcrumb_badges.save_status_saving"),
+            tooltip: t("breadcrumb_badges.save_status_saving_tooltip")
+        },
+        unsaved: {
+            icon: "bx bx-pencil",
+            title: t("breadcrumb_badges.save_status_unsaved"),
+            tooltip: t("breadcrumb_badges.save_status_unsaved_tooltip")
+        },
+        error: {
+            icon: "bx bxs-error",
+            title: t("breadcrumb_badges.save_status_error"),
+            tooltip: t("breadcrumb_badges.save_status_error_tooltip")
+        }
+    };
+
+    const { icon, title, tooltip } = stateConfig[saveState.state];
 
     return (
         <Badge
diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx
index 42c666ab1b..7d1d421faa 100644
--- a/apps/client/src/widgets/react/hooks.tsx
+++ b/apps/client/src/widgets/react/hooks.tsx
@@ -65,10 +65,11 @@ export function useTriliumEvents<T extends EventNames>(eventNames: T[], handler:
 
 export function useSpacedUpdate(callback: () => void | Promise<void>, interval = 1000, stateCallback?: StateCallback) {
     const callbackRef = useRef(callback);
+    const stateCallbackRef = useRef(stateCallback);
     const spacedUpdateRef = useRef<SpacedUpdate>(new SpacedUpdate(
         () => callbackRef.current(),
         interval,
-        stateCallback
+        (state) => stateCallbackRef.current?.(state)
     ));
 
     // Update callback ref when it changes
@@ -76,6 +77,11 @@ export function useSpacedUpdate(callback: () => void | Promise<void>, interval =
         callbackRef.current = callback;
     }, [callback]);
 
+    // Update state callback when it changes.
+    useEffect(() => {
+        stateCallbackRef.current = stateCallback;
+    }, [ stateCallback ]);
+
     // Update interval if it changes
     useEffect(() => {
         spacedUpdateRef.current?.setUpdateInterval(interval);