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,6 +64,7 @@ export const PageDetailEditor: React.FC<PageDetailEditorProps> = ({
       >
         {header}
       </WorkspaceHeader>
+      <Suspense>
         <Editor
           style={{
             height: 'calc(100% - 52px)',
@@ -90,6 +91,7 @@ export const PageDetailEditor: React.FC<PageDetailEditorProps> = ({
             [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>
+      <Suspense>
         <ContactModal
           open={open}
           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 (
+    <Suspense>
       <QuickSearchModal
         blockSuiteWorkspace={publicWorkspace.blockSuiteWorkspace}
         open={openQuickSearchModal}
         setOpen={setOpenQuickSearchModalAtom}
         router={router}
       />
+    </Suspense>
   );
 };
 

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

@@ -28,12 +28,14 @@ export const PublicQuickSearch: React.FC = () => {
     openQuickSearchModalAtom
   );
   return (
+    <Suspense>
       <QuickSearchModal
         blockSuiteWorkspace={publicWorkspace.blockSuiteWorkspace}
         open={openQuickSearchModal}
         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>
+        <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>
+        <Suspense>
           <Viewer
             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>
+      <Suspense>
         <BlockSuitePublicPageList
           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,6 +49,7 @@ export function Modals() {
 
   return (
     <>
+      <Suspense>
         <WorkspaceListModal
           disabled={transitioning}
           user={user}
@@ -92,6 +93,8 @@ export function Modals() {
             setOpenCreateWorkspaceModal(true);
           }, [setOpenCreateWorkspaceModal])}
         />
+      </Suspense>
+      <Suspense>
         <CreateWorkspaceModal
           open={openCreateWorkspaceModal}
           onClose={useCallback(() => {
@@ -114,6 +117,7 @@ export function Modals() {
             ]
           )}
         />
+      </Suspense>
     </>
   );
 }