toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-12-22 20:41:53 +03:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

30
packages/frontend/core/src/components/pure/cmdk/main.tsx
View File

@ -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<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}