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

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

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

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 (
     <>
-      <Suspense>
+      <TmpDisableAffineCloudModal
-        <TmpDisableAffineCloudModal
+        open={openDisableCloudAlertModal}
-          open={openDisableCloudAlertModal}
+        onOpenChange={setOpenDisableCloudAlertModal}
-          onOpenChange={setOpenDisableCloudAlertModal}
+      />
-        />
-      </Suspense>
       <StarAFFiNEModal />
       <IssueFeedbackModal />
       {currentWorkspace ? <Setting /> : null}
@@ -289,35 +233,29 @@ export const AllWorkspaceModals = (): ReactElement => {
 
   return (
     <>
-      <Suspense>
+      <CreateWorkspaceModal
-        <CreateWorkspaceModal
+        mode={isOpenCreateWorkspaceModal}
-          mode={isOpenCreateWorkspaceModal}
+        onClose={useCallback(() => {
-          onClose={useCallback(() => {
+          setOpenCreateWorkspaceModal(false);
+        }, [setOpenCreateWorkspaceModal])}
+        onCreate={useCallback(
+          (id, defaultDocId) => {
             setOpenCreateWorkspaceModal(false);
-          }, [setOpenCreateWorkspaceModal])}
+            // if jumping immediately, the page may stuck in loading state
-          onCreate={useCallback(
+            // not sure why yet .. here is a workaround
-            (id, defaultDocId) => {
+            setTimeout(() => {
-              setOpenCreateWorkspaceModal(false);
+              if (!defaultDocId) {
-              // if jumping immediately, the page may stuck in loading state
+                jumpToSubPath(id, WorkspaceSubPath.ALL);
-              // not sure why yet .. here is a workaround
+              } else {
-              setTimeout(() => {
+                jumpToPage(id, defaultDocId);
-                if (!defaultDocId) {
+              }
-                  jumpToSubPath(id, WorkspaceSubPath.ALL);
+            });
-                } else {
+          },
-                  jumpToPage(id, defaultDocId);
+          [jumpToPage, jumpToSubPath, setOpenCreateWorkspaceModal]
-                }
+        )}
-              });
+      />
-            },
+      <AuthModal />
-            [jumpToPage, jumpToSubPath, setOpenCreateWorkspaceModal]
+      <SignOutConfirmModal />
-          )}
-        />
-      </Suspense>
-      <Suspense>
-        <AuthModal />
-      </Suspense>
-      <Suspense>
-        <SignOutConfirmModal />
-      </Suspense>
       <PaymentDisableModal />
     </>
   );