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

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
-          theme={useTheme().resolvedTheme === 'light' ? 'light' : 'dark'}
-          value={user}
-        />
+        <Suspense>
+          <Viewer
+            theme={useTheme().resolvedTheme === 'light' ? 'light' : 'dark'}
+            value={user}
+          />
+        </Suspense>
       </StyledWrapper>
     </StyledPage>
   );