refactor(core): replace the loading state written in useState with useDebouncedValue (#6925)

close TOV-856

refactor(core): replace the loading state written in useState with useDebouncedState

fix(core): cloudSvg obscures toggle button

packages/frontend/core/src/components/affine/create-workspace-modal/index.css.ts

@@ -73,4 +73,5 @@ export const cloudSvgContainer = style({
   position: 'absolute',
   bottom: '0',
   right: '0',
+  pointerEvents: 'none',
 });

packages/frontend/core/src/components/pure/cmdk/main.tsx

@@ -7,15 +7,9 @@ import type { DocMeta } from '@blocksuite/store';
 import type { CommandCategory } from '@toeverything/infra';
 import clsx from 'clsx';
 import { Command } from 'cmdk';
+import { useDebouncedValue } from 'foxact/use-debounced-value';
 import { useAtom } from 'jotai';
-import {
+import { Suspense, useLayoutEffect, useMemo, useRef, useState } from 'react';
-  Suspense,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
 
 import {
   cmdkQueryAtom,
@@ -171,7 +165,7 @@ export const CMDKContainer = ({
   const isInEditor = pageMeta !== undefined;
   const [opening, setOpening] = useState(open);
   const { syncing, progress } = useDocEngineStatus();
-  const [showLoading, setShowLoading] = useState(false);
+  const showLoading = useDebouncedValue(syncing, 500);
 
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -192,24 +186,6 @@ 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}