From 506efdf02c60b8cd79fc62ee7e043020b3f62a0d Mon Sep 17 00:00:00 2001
From: CatsJuice <wp1298554944@hotmail.com>
Date: Sat, 30 Mar 2024 08:11:05 +0000
Subject: [PATCH] feat(core): make the synchronous animation trigger less
 frequently (#6412)

---
 .../workspace-card/index.tsx                  | 25 +++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/core/src/components/pure/workspace-slider-bar/workspace-card/index.tsx b/packages/frontend/core/src/components/pure/workspace-slider-bar/workspace-card/index.tsx
index 115c3bdf720c8..c356a32c7ec86 100644
--- a/packages/frontend/core/src/components/pure/workspace-slider-bar/workspace-card/index.tsx
+++ b/packages/frontend/core/src/components/pure/workspace-slider-bar/workspace-card/index.tsx
@@ -196,17 +196,37 @@ const useSyncEngineSyncProgress = () => {
       ((syncing && progress !== undefined) || isOverCapacity || !isOnline),
   };
 };
+const usePauseAnimation = (timeToResume = 5000) => {
+  const [paused, setPaused] = useState(false);
+
+  const resume = useCallback(() => {
+    setPaused(false);
+  }, []);
+
+  const pause = useCallback(() => {
+    setPaused(true);
+    if (timeToResume > 0) {
+      setTimeout(resume, timeToResume);
+    }
+  }, [resume, timeToResume]);
+
+  return { paused, pause };
+};
 
 const WorkspaceInfo = ({ name }: { name: string }) => {
   const { message, active } = useSyncEngineSyncProgress();
   const currentWorkspace = useService(Workspace);
   const isCloud = currentWorkspace.flavour === WorkspaceFlavour.AFFINE_CLOUD;
   const { progress } = useDocEngineStatus();
+  const { paused, pause } = usePauseAnimation();
 
   // to make sure that animation will play first time
   const [delayActive, setDelayActive] = useState(false);
   useEffect(() => {
-    const delayOpen = 300;
+    if (paused) {
+      return;
+    }
+    const delayOpen = 0;
     const delayClose = 200;
     let timer: ReturnType<typeof setTimeout>;
     if (active) {
@@ -216,10 +236,11 @@ const WorkspaceInfo = ({ name }: { name: string }) => {
     } else {
       timer = setTimeout(() => {
         setDelayActive(active);
+        pause();
       }, delayClose);
     }
     return () => clearTimeout(timer);
-  }, [active]);
+  }, [active, pause, paused]);
 
   return (
     <div className={styles.workspaceInfoSlider} data-active={delayActive}>