fix: wrap React.lazy with Suspense (#1915)

apps/web/src/components/page-detail-editor.tsx

@@ -5,7 +5,7 @@ import { useBlockSuiteWorkspacePageTitle } from '@toeverything/hooks/use-blocksu
 import { useAtomValue, useSetAtom } from 'jotai';
 import Head from 'next/head';
 import type React from 'react';
-import { lazy, startTransition, useCallback } from 'react';
+import { lazy, startTransition, Suspense, useCallback } from 'react';
 
 import { currentEditorAtom, workspacePreferredModeAtom } from '../atoms';
 import { usePageMeta } from '../hooks/use-page-meta';
@@ -64,32 +64,34 @@ export const PageDetailEditor: React.FC<PageDetailEditorProps> = ({
       >
         {header}
       </WorkspaceHeader>
-      <Editor
+      <Suspense>
-        style={{
+        <Editor
-          height: 'calc(100% - 52px)',
+          style={{
-        }}
+            height: 'calc(100% - 52px)',
-        key={pageId}
+          }}
-        mode={isPublic ? 'page' : currentMode}
+          key={pageId}
-        page={page}
+          mode={isPublic ? 'page' : currentMode}
-        onInit={useCallback(
+          page={page}
-          (page: Page, editor: Readonly<EditorContainer>) => {
+          onInit={useCallback(
-            startTransition(() => {
+            (page: Page, editor: Readonly<EditorContainer>) => {
-              setEditor(editor);
+              startTransition(() => {
-            });
+                setEditor(editor);
-            onInit(page, editor);
+              });
-          },
+              onInit(page, editor);
-          [onInit, setEditor]
+            },
-        )}
+            [onInit, setEditor]
-        onLoad={useCallback(
+          )}
-          (page: Page, editor: EditorContainer) => {
+          onLoad={useCallback(
-            startTransition(() => {
+            (page: Page, editor: EditorContainer) => {
-              setEditor(editor);
+              startTransition(() => {
-            });
+                setEditor(editor);
-            onLoad?.(page, editor);
+              });
-          },
+              onLoad?.(page, editor);
-          [onLoad, setEditor]
+            },
-        )}
+            [onLoad, setEditor]
-      />
+          )}
+        />
+      </Suspense>
     </>
   );
 };

apps/web/src/components/pure/help-island/index.tsx

@@ -2,7 +2,7 @@ import { MuiFade, Tooltip } from '@affine/component';
 import { config } from '@affine/env';
 import { useTranslation } from '@affine/i18n';
 import { CloseIcon, NewIcon } from '@blocksuite/icons';
-import { lazy, useState } from 'react';
+import { lazy, Suspense, useState } from 'react';
 
 import { ShortcutsModal } from '../shortcuts-modal';
 import { ContactIcon, HelpIcon, KeyboardIcon } from './Icons';
@@ -113,11 +113,13 @@ export const HelpIsland = ({
           </StyledTriggerWrapper>
         </MuiFade>
       </StyledIsland>
-      <ContactModal
+      <Suspense>
-        open={open}
+        <ContactModal
-        onClose={() => setOpen(false)}
+          open={open}
-        logoSrc="/imgs/affine-text-logo.png"
+          onClose={() => setOpen(false)}
-      />
+          logoSrc="/imgs/affine-text-logo.png"
+        />
+      </Suspense>
       <ShortcutsModal
         open={openShortCut}
         onClose={() => setOpenShortCut(false)}

apps/web/src/layouts/index.tsx

@@ -69,12 +69,14 @@ export const PublicQuickSearch: FC = () => {
     openQuickSearchModalAtom
   );
   return (
-    <QuickSearchModal
+    <Suspense>
-      blockSuiteWorkspace={publicWorkspace.blockSuiteWorkspace}
+      <QuickSearchModal
-      open={openQuickSearchModal}
+        blockSuiteWorkspace={publicWorkspace.blockSuiteWorkspace}
-      setOpen={setOpenQuickSearchModalAtom}
+        open={openQuickSearchModal}
-      router={router}
+        setOpen={setOpenQuickSearchModalAtom}
-    />
+        router={router}
+      />
+    </Suspense>
   );
 };
 

apps/web/src/layouts/public-workspace-layout.tsx

@@ -28,12 +28,14 @@ export const PublicQuickSearch: React.FC = () => {
     openQuickSearchModalAtom
   );
   return (
-    <QuickSearchModal
+    <Suspense>
-      blockSuiteWorkspace={publicWorkspace.blockSuiteWorkspace}
+      <QuickSearchModal
-      open={openQuickSearchModal}
+        blockSuiteWorkspace={publicWorkspace.blockSuiteWorkspace}
-      setOpen={setOpenQuickSearchModalAtom}
+        open={openQuickSearchModal}
-      router={router}
+        setOpen={setOpenQuickSearchModalAtom}
-    />
+        router={router}
+      />
+    </Suspense>
   );
 };
 

apps/web/src/pages/_debug/init-page.dev.tsx

@@ -1,6 +1,6 @@
 import { NoSsr } from '@mui/material';
 import { useRouter } from 'next/router';
-import { lazy } from 'react';
+import { lazy, Suspense } from 'react';
 
 import { StyledPage, StyledWrapper } from '../../layouts/styles';
 import type { NextPageWithLayout } from '../../shared';
@@ -26,7 +26,9 @@ const InitPagePage: NextPageWithLayout = () => {
   return (
     <StyledPage>
       <StyledWrapper>
-        <Editor onInit={initPage} testType={testType} />
+        <Suspense>
+          <Editor onInit={initPage} testType={testType} />
+        </Suspense>
         <div id="toolWrapper" />
       </StyledWrapper>
     </StyledPage>

apps/web/src/pages/_debug/login.dev.tsx

@@ -11,7 +11,7 @@ import {
 } from '@affine/workspace/affine/login';
 import { useAtom } from 'jotai';
 import type { NextPage } from 'next';
-import { lazy, useMemo } from 'react';
+import { lazy, Suspense, useMemo } from 'react';
 
 import { toast } from '../../utils';
 
@@ -91,10 +91,12 @@ const LoginDevPage: NextPage = () => {
         >
           Check Permission
         </Button>
-        <Viewer
+        <Suspense>
-          theme={useTheme().resolvedTheme === 'light' ? 'light' : 'dark'}
+          <Viewer
-          value={user}
+            theme={useTheme().resolvedTheme === 'light' ? 'light' : 'dark'}
-        />
+            value={user}
+          />
+        </Suspense>
       </StyledWrapper>
     </StyledPage>
   );

apps/web/src/pages/public-workspace/[workspaceId].tsx

@@ -71,10 +71,12 @@ const ListPageInner: React.FC<{
           <SearchIcon />
         </IconButton>
       </NavContainer>
-      <BlockSuitePublicPageList
+      <Suspense>
-        onOpenPage={handleClickPage}
+        <BlockSuitePublicPageList
-        blockSuiteWorkspace={blockSuiteWorkspace}
+          onOpenPage={handleClickPage}
-      />
+          blockSuiteWorkspace={blockSuiteWorkspace}
+        />
+      </Suspense>
     </>
   );
 };

apps/web/src/providers/ModalProvider.tsx

@@ -3,7 +3,7 @@ import { arrayMove } from '@dnd-kit/sortable';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import { useRouter } from 'next/router';
 import type React from 'react';
-import { lazy, useCallback, useTransition } from 'react';
+import { lazy, Suspense, useCallback, useTransition } from 'react';
 
 import {
   currentWorkspaceIdAtom,
@@ -49,71 +49,75 @@ export function Modals() {
 
   return (
     <>
-      <WorkspaceListModal
+      <Suspense>
-        disabled={transitioning}
+        <WorkspaceListModal
-        user={user}
+          disabled={transitioning}
-        workspaces={workspaces}
+          user={user}
-        currentWorkspaceId={currentWorkspaceId}
+          workspaces={workspaces}
-        open={openWorkspacesModal || workspaces.length === 0}
+          currentWorkspaceId={currentWorkspaceId}
-        onClose={useCallback(() => {
+          open={openWorkspacesModal || workspaces.length === 0}
-          setOpenWorkspacesModal(false);
+          onClose={useCallback(() => {
-        }, [setOpenWorkspacesModal])}
-        onMoveWorkspace={useCallback(
-          (activeId, overId) => {
-            const oldIndex = workspaces.findIndex(w => w.id === activeId);
-            const newIndex = workspaces.findIndex(w => w.id === overId);
-            transition(() =>
-              setWorkspaces(workspaces =>
-                arrayMove(workspaces, oldIndex, newIndex)
-              )
-            );
-          },
-          [setWorkspaces, workspaces]
-        )}
-        onClickWorkspace={useCallback(
-          workspace => {
             setOpenWorkspacesModal(false);
-            setCurrentWorkspace(workspace.id);
+          }, [setOpenWorkspacesModal])}
-            jumpToSubPath(workspace.id, WorkspaceSubPath.ALL);
+          onMoveWorkspace={useCallback(
-          },
+            (activeId, overId) => {
-          [jumpToSubPath, setCurrentWorkspace, setOpenWorkspacesModal]
+              const oldIndex = workspaces.findIndex(w => w.id === activeId);
-        )}
+              const newIndex = workspaces.findIndex(w => w.id === overId);
-        onClickWorkspaceSetting={useCallback(
+              transition(() =>
-          workspace => {
+                setWorkspaces(workspaces =>
-            setOpenWorkspacesModal(false);
+                  arrayMove(workspaces, oldIndex, newIndex)
-            setCurrentWorkspace(workspace.id);
+                )
-            jumpToSubPath(workspace.id, WorkspaceSubPath.SETTING);
+              );
-          },
+            },
-          [jumpToSubPath, setCurrentWorkspace, setOpenWorkspacesModal]
+            [setWorkspaces, workspaces]
-        )}
+          )}
-        onClickLogin={useAffineLogIn()}
+          onClickWorkspace={useCallback(
-        onClickLogout={useAffineLogOut()}
+            workspace => {
-        onCreateWorkspace={useCallback(() => {
+              setOpenWorkspacesModal(false);
-          setOpenCreateWorkspaceModal(true);
+              setCurrentWorkspace(workspace.id);
-        }, [setOpenCreateWorkspaceModal])}
+              jumpToSubPath(workspace.id, WorkspaceSubPath.ALL);
-      />
+            },
-      <CreateWorkspaceModal
+            [jumpToSubPath, setCurrentWorkspace, setOpenWorkspacesModal]
-        open={openCreateWorkspaceModal}
+          )}
-        onClose={useCallback(() => {
+          onClickWorkspaceSetting={useCallback(
-          setOpenCreateWorkspaceModal(false);
+            workspace => {
-        }, [setOpenCreateWorkspaceModal])}
+              setOpenWorkspacesModal(false);
-        onCreate={useCallback(
+              setCurrentWorkspace(workspace.id);
-          async name => {
+              jumpToSubPath(workspace.id, WorkspaceSubPath.SETTING);
-            const id = await createLocalWorkspace(name);
+            },
+            [jumpToSubPath, setCurrentWorkspace, setOpenWorkspacesModal]
+          )}
+          onClickLogin={useAffineLogIn()}
+          onClickLogout={useAffineLogOut()}
+          onCreateWorkspace={useCallback(() => {
+            setOpenCreateWorkspaceModal(true);
+          }, [setOpenCreateWorkspaceModal])}
+        />
+      </Suspense>
+      <Suspense>
+        <CreateWorkspaceModal
+          open={openCreateWorkspaceModal}
+          onClose={useCallback(() => {
             setOpenCreateWorkspaceModal(false);
-            setOpenWorkspacesModal(false);
+          }, [setOpenCreateWorkspaceModal])}
-            setCurrentWorkspace(id);
+          onCreate={useCallback(
-            return jumpToSubPath(id, WorkspaceSubPath.ALL);
+            async name => {
-          },
+              const id = await createLocalWorkspace(name);
-          [
+              setOpenCreateWorkspaceModal(false);
-            createLocalWorkspace,
+              setOpenWorkspacesModal(false);
-            jumpToSubPath,
+              setCurrentWorkspace(id);
-            setCurrentWorkspace,
+              return jumpToSubPath(id, WorkspaceSubPath.ALL);
-            setOpenCreateWorkspaceModal,
+            },
-            setOpenWorkspacesModal,
+            [
-          ]
+              createLocalWorkspace,
-        )}
+              jumpToSubPath,
-      />
+              setCurrentWorkspace,
+              setOpenCreateWorkspaceModal,
+              setOpenWorkspacesModal,
+            ]
+          )}
+        />
+      </Suspense>
     </>
   );
 }