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
This commit is contained in:
JimmFly 2024-05-16 08:11:30 +00:00
parent c7ddd679fd
commit b8612f3071
No known key found for this signature in database
GPG Key ID: 14A6F56854E1BED7
2 changed files with 4 additions and 27 deletions

View File

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

View File

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