auto save

src/pages/home/hooks/useHomeData.ts

@@ -1,6 +1,6 @@
 import * as api from "../service/HomeService";
 import { useMutation, useQuery } from "@tanstack/react-query";
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 export const useCreateCatalog = () => {
   return useMutation({
@@ -35,14 +35,18 @@ export const useUpdateCatalog = () => {
   });
 
   const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const [isScheduledSaving, setIsScheduledSaving] = useState(false);
 
   const scheduleUpdate = useCallback(
     (params: Parameters<typeof api.updateCatalog>[0], delayMs = 3000) => {
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
       }
+      setIsScheduledSaving(true);
 
       timeoutRef.current = setTimeout(() => {
+        timeoutRef.current = null;
+        setIsScheduledSaving(false);
         mutation.mutate(params);
       }, delayMs);
     },
@@ -54,6 +58,7 @@ export const useUpdateCatalog = () => {
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
       }
+      setIsScheduledSaving(false);
     },
     [],
   );
@@ -61,5 +66,6 @@ export const useUpdateCatalog = () => {
   return {
     ...mutation,
     scheduleUpdate,
+    isSaving: isScheduledSaving || mutation.isPending,
   };
 };