diff --git a/packages/frontend/core/src/components/affine/create-workspace-modal/index.css.ts b/packages/frontend/core/src/components/affine/create-workspace-modal/index.css.ts index 2c23055278..5b0ede3fe8 100644 --- a/packages/frontend/core/src/components/affine/create-workspace-modal/index.css.ts +++ b/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', }); diff --git a/packages/frontend/core/src/components/pure/cmdk/main.tsx b/packages/frontend/core/src/components/pure/cmdk/main.tsx index ad1ed113d7..7458eb288b 100644 --- a/packages/frontend/core/src/components/pure/cmdk/main.tsx +++ b/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 { - Suspense, - useEffect, - useLayoutEffect, - useMemo, - useRef, - useState, -} from 'react'; +import { Suspense, 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(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 (