perf(timer): perf

components/label/LabelNossr.tsx

@@ -48,7 +48,11 @@ import { useDescToolsStore } from "./useDescToolsStore"
 import { useKeyboardStore } from "./useKeyBoardStore"
 import { usePaperStore } from "./usePaperStore"
 import { useRightToolsStore } from "./useRightToolsStore"
-import { useIntervalStore, useTimerStore } from "./useTimerStore"
+import {
+  useIntervalStore,
+  useLabelTimeStore,
+  useTimerStore,
+} from "./useTimerStore"
 import { useTopToolsStore } from "./useTopToolsStore"
 import { findGroupKey } from "./util"
 import { safeClone } from "./utils/clone"
@@ -157,19 +161,20 @@ const LabelPage = ({
   //   Project.LabelSchemaList[]
   // >([]);
   const topRef = useRef<any>(null)
+  const autoSaveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const autoSaveInProgressRef = useRef(false)
   const paperContainerRef = useRef<any>(null)
   const qaToolContainerRef = useRef<any>(null)
   const [isConfirmSave, setIsConfirmSave] = useState(false)
   const [loading, setLoading] = useState(false)
   const [sizes, setSizes] = useState<number[]>([])
 
-  const {
-    label: labelData,
-    setLabel,
-    setStateStack,
-    setLabelTime,
-  } = useLabelStore()
-  const { isAutoSave, autoSaveGap } = useIntervalStore()
+  const labelData = useLabelStore((state) => state.label)
+  const setLabel = useLabelStore((state) => state.setLabel)
+  const setStateStack = useLabelStore((state) => state.setStateStack)
+  const setLabelTime = useLabelTimeStore((state) => state.setLabelTime)
+  const isAutoSave = useIntervalStore((state) => state.isAutoSave)
+  const autoSaveGap = useIntervalStore((state) => state.autoSaveGap)
 
   const {
     editMode,
@@ -1310,17 +1315,40 @@ const LabelPage = ({
 
   // auto save
   useEffect(() => {
-    if (isAutoSave && !isView) {
-      const minute = 60 * 1000
-      useIntervalStore.getState().startTimer(() => {
-        topRef.current.handleSave()
-      }, autoSaveGap * minute)
-    } else {
-      useIntervalStore.getState().clearTimer()
+    let cancelled = false
+    if (autoSaveTimerRef.current !== null) {
+      clearTimeout(autoSaveTimerRef.current)
+      autoSaveTimerRef.current = null
     }
+    if (!isAutoSave || isView) return
 
+    const minute = 60 * 1000
+    const delay = autoSaveGap * minute
+    const scheduleNext = () => {
+      autoSaveTimerRef.current = setTimeout(async () => {
+        if (cancelled) return
+        if (autoSaveInProgressRef.current) {
+          scheduleNext()
+          return
+        }
+        autoSaveInProgressRef.current = true
+        try {
+          await topRef.current?.handleSave?.()
+        } catch (error) {
+          console.error("[LabelNossr] auto save failed", error)
+        } finally {
+          autoSaveInProgressRef.current = false
+          if (!cancelled) scheduleNext()
+        }
+      }, delay)
+    }
+    scheduleNext()
     return () => {
-      useIntervalStore.getState().clearTimer()
+      cancelled = true
+      if (autoSaveTimerRef.current !== null) {
+        clearTimeout(autoSaveTimerRef.current)
+        autoSaveTimerRef.current = null
+      }
     }
   }, [autoSaveGap, isAutoSave, isView])