fix(core): fix ui flickering on startup (#7349)

This commit is contained in:
EYHN
2024-06-27 03:33:14 +00:00
parent 6f31d5ee6a
commit 595b904d24
3 changed files with 45 additions and 115 deletions

View File

@@ -10,7 +10,7 @@ import {
} from '@toeverything/infra';
import { useAtom } from 'jotai';
import type { ReactElement } from 'react';
import { lazy, Suspense, useCallback, useEffect } from 'react';
import { useCallback, useEffect } from 'react';
import type { SettingAtom } from '../atoms';
import {
@@ -20,83 +20,29 @@ import {
openSettingModalAtom,
openSignOutModalAtom,
} from '../atoms';
import { AuthModal as Auth } from '../components/affine/auth';
import { AiLoginRequiredModal } from '../components/affine/auth/ai-login-required';
import { CreateWorkspaceModal } from '../components/affine/create-workspace-modal';
import { HistoryTipsModal } from '../components/affine/history-tips-modal';
import { IssueFeedbackModal } from '../components/affine/issue-feedback-modal';
import { PaymentDisableModal } from '../components/affine/payment-disable';
import {
CloudQuotaModal,
LocalQuotaModal,
} from '../components/affine/quota-reached-modal';
import { SettingModal } from '../components/affine/setting-modal';
import { SignOutModal } from '../components/affine/sign-out-modal';
import { StarAFFiNEModal } from '../components/affine/star-affine-modal';
import { TmpDisableAffineCloudModal } from '../components/affine/tmp-disable-affine-cloud-modal';
import { MoveToTrash } from '../components/page-list';
import { useTrashModalHelper } from '../hooks/affine/use-trash-modal-helper';
import { useAsyncCallback } from '../hooks/affine-async-hooks';
import { useNavigateHelper } from '../hooks/use-navigate-helper';
import { AuthService } from '../modules/cloud/services/auth';
import { FindInPageModal } from '../modules/find-in-page/view/find-in-page-modal';
import { PeekViewManagerModal } from '../modules/peek-view';
import { WorkspaceSubPath } from '../shared';
const Auth = lazy(() =>
import('../components/affine/auth').then(module => ({
default: module.AuthModal,
}))
);
const CreateWorkspaceModal = lazy(() =>
import('../components/affine/create-workspace-modal').then(module => ({
default: module.CreateWorkspaceModal,
}))
);
const TmpDisableAffineCloudModal = lazy(() =>
import('../components/affine/tmp-disable-affine-cloud-modal').then(
module => ({
default: module.TmpDisableAffineCloudModal,
})
)
);
const SignOutModal = lazy(() =>
import('../components/affine/sign-out-modal').then(module => ({
default: module.SignOutModal,
}))
);
const LocalQuotaModal = lazy(() =>
import('../components/affine/quota-reached-modal').then(module => ({
default: module.LocalQuotaModal,
}))
);
const CloudQuotaModal = lazy(() =>
import('../components/affine/quota-reached-modal').then(module => ({
default: module.CloudQuotaModal,
}))
);
const StarAFFiNEModal = lazy(() =>
import('../components/affine/star-affine-modal').then(module => ({
default: module.StarAFFiNEModal,
}))
);
const IssueFeedbackModal = lazy(() =>
import('../components/affine/issue-feedback-modal').then(module => ({
default: module.IssueFeedbackModal,
}))
);
const HistoryTipsModal = lazy(() =>
import('../components/affine/history-tips-modal').then(module => ({
default: module.HistoryTipsModal,
}))
);
const AiLoginRequiredModal = lazy(() =>
import('../components/affine/auth/ai-login-required').then(module => ({
default: module.AiLoginRequiredModal,
}))
);
const FindInPageModal = lazy(() =>
import('../modules/find-in-page/view/find-in-page-modal').then(module => ({
default: module.FindInPageModal,
}))
);
export const Setting = () => {
const [{ open, workspaceMetadata, activeTab }, setOpenSettingModalAtom] =
useAtom(openSettingModalAtom);
@@ -212,12 +158,10 @@ export function CurrentWorkspaceModals() {
return (
<>
<Suspense>
<TmpDisableAffineCloudModal
open={openDisableCloudAlertModal}
onOpenChange={setOpenDisableCloudAlertModal}
/>
</Suspense>
<TmpDisableAffineCloudModal
open={openDisableCloudAlertModal}
onOpenChange={setOpenDisableCloudAlertModal}
/>
<StarAFFiNEModal />
<IssueFeedbackModal />
{currentWorkspace ? <Setting /> : null}
@@ -289,35 +233,29 @@ export const AllWorkspaceModals = (): ReactElement => {
return (
<>
<Suspense>
<CreateWorkspaceModal
mode={isOpenCreateWorkspaceModal}
onClose={useCallback(() => {
<CreateWorkspaceModal
mode={isOpenCreateWorkspaceModal}
onClose={useCallback(() => {
setOpenCreateWorkspaceModal(false);
}, [setOpenCreateWorkspaceModal])}
onCreate={useCallback(
(id, defaultDocId) => {
setOpenCreateWorkspaceModal(false);
}, [setOpenCreateWorkspaceModal])}
onCreate={useCallback(
(id, defaultDocId) => {
setOpenCreateWorkspaceModal(false);
// if jumping immediately, the page may stuck in loading state
// not sure why yet .. here is a workaround
setTimeout(() => {
if (!defaultDocId) {
jumpToSubPath(id, WorkspaceSubPath.ALL);
} else {
jumpToPage(id, defaultDocId);
}
});
},
[jumpToPage, jumpToSubPath, setOpenCreateWorkspaceModal]
)}
/>
</Suspense>
<Suspense>
<AuthModal />
</Suspense>
<Suspense>
<SignOutConfirmModal />
</Suspense>
// if jumping immediately, the page may stuck in loading state
// not sure why yet .. here is a workaround
setTimeout(() => {
if (!defaultDocId) {
jumpToSubPath(id, WorkspaceSubPath.ALL);
} else {
jumpToPage(id, defaultDocId);
}
});
},
[jumpToPage, jumpToSubPath, setOpenCreateWorkspaceModal]
)}
/>
<AuthModal />
<SignOutConfirmModal />
<PaymentDisableModal />
</>
);