Use Debouncer for composer draft persistence writes

- Replace manual timeout/pending-value debounce logic with `@tanstack/react-pacer` `Debouncer` - Keep `removeItem`/`flush` behavior while simplifying and standardizing persistence timing

Julius Marminge committed 8 months ago

Commit 82c0a451 parent e7650511 file · +11 −27Browse files

Unified · Split

apps/web/src/composerDraftStore.ts+11−27

   DEFAULT_RUNTIME_MODE,
   type ChatImageAttachment,
 } from "./types";
+import { Debouncer } from "@tanstack/react-pacer";
 import { create } from "zustand";
 import { createJSONStorage, persist, type StateStorage } from "zustand/middleware";
 }
 export function createDebouncedStorage(baseStorage: StateStorage): DebouncedStorage {
-  let timer: ReturnType<typeof setTimeout> | null = null;
+  const debouncedSetItem = new Debouncer(
-  let pendingName: string | null = null;
+    (name: string, value: string) => {
-  let pendingValue: string | null = null;
+      baseStorage.setItem(name, value);
+    },
+    { wait: COMPOSER_PERSIST_DEBOUNCE_MS },
+  );
   return {
     getItem: (name) => baseStorage.getItem(name),
     setItem: (name, value) => {
-      pendingName = name;
+      debouncedSetItem.maybeExecute(name, value);
-      pendingValue = value;
-      if (timer !== null) {
-        clearTimeout(timer);
-      }
-      timer = setTimeout(() => {
-        timer = null;
-        pendingName = null;
-        pendingValue = null;
-        baseStorage.setItem(name, value);
-      }, COMPOSER_PERSIST_DEBOUNCE_MS);
     },
     removeItem: (name) => {
-      if (timer !== null) {
+      debouncedSetItem.cancel();
-        clearTimeout(timer);
-        timer = null;
-        pendingName = null;
-        pendingValue = null;
-      }
       baseStorage.removeItem(name);
     },
     flush: () => {
-      if (timer !== null && pendingName !== null && pendingValue !== null) {
+      debouncedSetItem.flush();
-        clearTimeout(timer);
-        timer = null;
-        baseStorage.setItem(pendingName, pendingValue);
-        pendingName = null;
-        pendingValue = null;
-      }
     },
   };
 }