From 595b904d244e0c5df04b6c7db646b992483b7dbc Mon Sep 17 00:00:00 2001 From: EYHN Date: Thu, 27 Jun 2024 03:33:14 +0000 Subject: [PATCH] fix(core): fix ui flickering on startup (#7349) --- .../src/components/affine/awareness/index.tsx | 8 +- .../core/src/layouts/workspace-layout.tsx | 10 +- .../core/src/providers/modal-provider.tsx | 142 +++++------------- 3 files changed, 45 insertions(+), 115 deletions(-) diff --git a/packages/frontend/core/src/components/affine/awareness/index.tsx b/packages/frontend/core/src/components/affine/awareness/index.tsx index 653a852182..63bce634b4 100644 --- a/packages/frontend/core/src/components/affine/awareness/index.tsx +++ b/packages/frontend/core/src/components/affine/awareness/index.tsx @@ -1,5 +1,5 @@ import { useLiveData, useService, WorkspaceService } from '@toeverything/infra'; -import { Suspense, useEffect } from 'react'; +import { useEffect } from 'react'; import { AuthService } from '../../../modules/cloud'; @@ -44,9 +44,5 @@ const SyncAwarenessInner = () => { // TODO(@eyhn): we could do something more interesting here, e.g., show where the current user is export const SyncAwareness = () => { - return ( - - - - ); + return ; }; diff --git a/packages/frontend/core/src/layouts/workspace-layout.tsx b/packages/frontend/core/src/layouts/workspace-layout.tsx index e96c1ded46..dda88d5a2f 100644 --- a/packages/frontend/core/src/layouts/workspace-layout.tsx +++ b/packages/frontend/core/src/layouts/workspace-layout.tsx @@ -17,7 +17,7 @@ import { } from '@toeverything/infra'; import { useAtomValue, useSetAtom } from 'jotai'; import type { PropsWithChildren, ReactNode } from 'react'; -import { lazy, useCallback, useEffect, useMemo, useState } from 'react'; +import { useCallback, useEffect, useMemo, useState } from 'react'; import { createPortal } from 'react-dom'; import { Map as YMap } from 'yjs'; @@ -41,6 +41,7 @@ import { useRegisterFindInPageCommands } from '../hooks/affine/use-register-find import { useNavigateHelper } from '../hooks/use-navigate-helper'; import { useRegisterWorkspaceCommands } from '../hooks/use-register-workspace-commands'; import { QuickSearchService } from '../modules/cmdk'; +import { CMDKQuickSearchModal } from '../modules/cmdk/views'; import { useRegisterNavigationCommands } from '../modules/navigation/view/use-register-navigation-commands'; import { WorkbenchService } from '../modules/workbench'; import { @@ -52,12 +53,6 @@ import { pathGenerator } from '../shared'; import { mixpanel } from '../utils'; import * as styles from './styles.css'; -const CMDKQuickSearchModal = lazy(() => - import('../modules/cmdk/views').then(module => ({ - default: module.CMDKQuickSearchModal, - })) -); - export const QuickSearch = () => { const quickSearch = useService(QuickSearchService).quickSearch; const open = useLiveData(quickSearch.show$); @@ -239,6 +234,7 @@ export const WorkspaceLayoutInner = ({ children }: PropsWithChildren) => { createPage={handleCreatePage} paths={pathGenerator} /> + {needUpgrade || upgrading ? : children} diff --git a/packages/frontend/core/src/providers/modal-provider.tsx b/packages/frontend/core/src/providers/modal-provider.tsx index 97f8d7db56..db0f11c1a4 100644 --- a/packages/frontend/core/src/providers/modal-provider.tsx +++ b/packages/frontend/core/src/providers/modal-provider.tsx @@ -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 ( <> - - - + {currentWorkspace ? : null} @@ -289,35 +233,29 @@ export const AllWorkspaceModals = (): ReactElement => { return ( <> - - { + { + 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] - )} - /> - - - - - - - + // 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] + )} + /> + + );