diff --git a/src/pages/editor/Editor.tsx b/src/pages/editor/Editor.tsx index 85317ba..e2f9f00 100644 --- a/src/pages/editor/Editor.tsx +++ b/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 ? ( +
+
+ + {/* در حال ذخیره ... */} +
+
+ ) : null} diff --git a/src/pages/home/hooks/useHomeData.ts b/src/pages/home/hooks/useHomeData.ts index 9eb2d61..ff99844 100644 --- a/src/pages/home/hooks/useHomeData.ts +++ b/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 | null>(null); + const [isScheduledSaving, setIsScheduledSaving] = useState(false); const scheduleUpdate = useCallback( (params: Parameters[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, }; };