auto save

src/pages/editor/Editor.tsx

@@ -13,7 +13,7 @@ const Editor: FC = () => {
     const [isLayersPanelOpen, setIsLayersPanelOpen] = useState(false)
     const { loadPages, pages } = useEditorStore()
     const { data } = useGetCatalogById(id!)
-    const { scheduleUpdate } = useUpdateCatalog()
+    const { scheduleUpdate, isSaving } = useUpdateCatalog()
 
     useEffect(() => {
         if (data?.data && data?.data?.content) {
@@ -46,6 +46,14 @@ const Editor: FC = () => {
             "flex h-full w-full",
             isLayersPanelOpen ? "xl:pl-[296px]" : "xl:pl-[80px]"
         )}>
+            {isSaving ? (
+                <div className="fixed top-10 left-10 z-50 rounded-full  shadow-sm">
+                    <div className="flex items-center gap-2 text-sm text-gray-700">
+                        <span className="h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-black" />
+                        {/* <span>در حال ذخیره ...</span> */}
+                    </div>
+                </div>
+            ) : null}
             <LayersPanel isOpen={isLayersPanelOpen} setIsOpen={setIsLayersPanelOpen} />
             <EditorCanvas catalogSize={data?.data?.size} />
             <EditorSidebar />

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,
   };
 };