From b723dd8ab88bd8000519b0cb2f975a21b488c10d Mon Sep 17 00:00:00 2001
From: JimmFly <447268514@qq.com>
Date: Mon, 13 May 2024 09:11:39 +0000
Subject: [PATCH] fix(core): the loading of cmdk flashes during synchronization
 (#6907)

close TOV-852
---
 .../core/src/components/pure/cmdk/main.tsx    | 32 +++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/core/src/components/pure/cmdk/main.tsx b/packages/frontend/core/src/components/pure/cmdk/main.tsx
index 36c00d622..ad1ed113d 100644
--- a/packages/frontend/core/src/components/pure/cmdk/main.tsx
+++ b/packages/frontend/core/src/components/pure/cmdk/main.tsx
@@ -8,7 +8,14 @@ import type { CommandCategory } from '@toeverything/infra';
 import clsx from 'clsx';
 import { Command } from 'cmdk';
 import { useAtom } from 'jotai';
-import { Suspense, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import {
+  Suspense,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 import {
   cmdkQueryAtom,
@@ -164,6 +171,8 @@ export const CMDKContainer = ({
   const isInEditor = pageMeta !== undefined;
   const [opening, setOpening] = useState(open);
   const { syncing, progress } = useDocEngineStatus();
+  const [showLoading, setShowLoading] = useState(false);
+
   const inputRef = useRef<HTMLInputElement>(null);
 
   // fix list height animation on opening
@@ -182,6 +191,25 @@ export const CMDKContainer = ({
     }
     return;
   }, [open]);
+
+  useEffect(() => {
+    let timeoutId: NodeJS.Timeout | null = null;
+
+    if (syncing && !showLoading) {
+      timeoutId = setTimeout(() => {
+        setShowLoading(true);
+      }, 500);
+    } else if (!syncing && showLoading) {
+      setShowLoading(false);
+    }
+
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, [syncing, showLoading]);
+
   return (
     <Command
       {...rest}
@@ -205,7 +233,7 @@ export const CMDKContainer = ({
           inEditor: isInEditor,
         })}
       >
-        {syncing ? (
+        {showLoading ? (
           <Loading
             size={24}
             progress={progress ? Math.max(progress, 0.2) : undefined}