Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-12 04:18:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

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

8
packages/frontend/core/src/components/affine/awareness/index.tsx
View File

@@ -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 (
<Suspense>
<SyncAwarenessInner />
</Suspense>
);
return <SyncAwarenessInner />;
};

10
packages/frontend/core/src/layouts/workspace-layout.tsx
View File

@@ -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}
/>
<MainContainer clientBorder={appSettings.clientBorder}>
{needUpgrade || upgrading ? <WorkspaceUpgrade /> : children}
</MainContainer>

142
packages/frontend/core/src/providers/modal-provider.tsx
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 />
</>
);