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