feat(ui): debounce persistence instead of throttle

Author: psychedelicious

invokeai/frontend/web/src/app/components/InvokeAIUI.tsx

@@ -71,7 +71,7 @@ interface Props extends PropsWithChildren {
    * If provided, overrides in-app navigation to the model manager
    */
   onClickGoToModelManager?: () => void;
-  storagePersistThrottle?: number;
+  storagePersistDebounce?: number;
 }
 
 const InvokeAIUI = ({
@@ -98,7 +98,7 @@ const InvokeAIUI = ({
   loggingOverrides,
   onClickGoToModelManager,
   whatsNew,
-  storagePersistThrottle = 2000,
+  storagePersistDebounce = 2000,
 }: Props) => {
   const [store, setStore] = useState<ReturnType<typeof createStore> | undefined>(undefined);
   const [didRehydrate, setDidRehydrate] = useState(false);
@@ -318,7 +318,7 @@ const InvokeAIUI = ({
     const onRehydrated = () => {
       setDidRehydrate(true);
     };
-    const store = createStore({ persist: true, persistThrottle: storagePersistThrottle, onRehydrated });
+    const store = createStore({ persist: true, persistDebounce: storagePersistDebounce, onRehydrated });
     setStore(store);
     $store.set(store);
     if (import.meta.env.MODE === 'development') {
@@ -333,7 +333,7 @@ const InvokeAIUI = ({
         window.$store = undefined;
       }
     };
-  }, [storagePersistThrottle]);
+  }, [storagePersistDebounce]);
 
   if (!store || !didRehydrate) {
     return <Loading />;

invokeai/frontend/web/src/app/store/store.ts

@@ -184,7 +184,7 @@ const PERSISTED_KEYS = Object.values(SLICE_CONFIGS)
   .filter((sliceConfig) => !!sliceConfig.persistConfig)
   .map((sliceConfig) => sliceConfig.slice.reducerPath);
 
-export const createStore = (options?: { persist?: boolean; persistThrottle?: number; onRehydrated?: () => void }) => {
+export const createStore = (options?: { persist?: boolean; persistDebounce?: number; onRehydrated?: () => void }) => {
   const store = configureStore({
     reducer: rememberedRootReducer,
     middleware: (getDefaultMiddleware) =>
@@ -204,7 +204,7 @@ export const createStore = (options?: { persist?: boolean; persistThrottle?: num
       if (options?.persist) {
         return enhancers.prepend(
           rememberEnhancer(reduxRememberDriver, PERSISTED_KEYS, {
-            persistThrottle: options?.persistThrottle ?? 2000,
+            persistDebounce: options?.persistDebounce ?? 2000,
             serialize,
             unserialize,
             prefix: '',