chore(client/save_indicator): address requested changes

This commit is contained in:
Elian Doran
2026-01-03 19:47:33 +02:00
parent 42283b2469
commit 02e08fdf12
3 changed files with 32 additions and 26 deletions

View File

@@ -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();

View File

@@ -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

View File

@@ -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);