feat: lazy load modal components (#1337)

apps/web/src/layouts/index.tsx

@@ -4,6 +4,7 @@ import { assertExists, nanoid } from '@blocksuite/store';
 import { NoSsr } from '@mui/material';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import { atomWithStorage } from 'jotai/utils';
+import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
 import React, { Suspense, useCallback, useEffect } from 'react';
 import { Helmet } from 'react-helmet-async';
@@ -17,7 +18,6 @@ import {
 } from '../atoms';
 import { HelpIsland } from '../components/pure/help-island';
 import { PageLoading } from '../components/pure/loading';
-import QuickSearchModal from '../components/pure/quick-search-modal';
 import WorkSpaceSliderBar from '../components/pure/workspace-slider-bar';
 import { useCurrentPageId } from '../hooks/current/use-current-page-id';
 import { useCurrentWorkspace } from '../hooks/current/use-current-workspace';
@@ -30,6 +30,10 @@ import { ModalProvider } from '../providers/ModalProvider';
 import { pathGenerator, publicPathGenerator } from '../shared';
 import { StyledPage, StyledToolWrapper, StyledWrapper } from './styles';
 
+const QuickSearchModal = dynamic(
+  () => import('../components/pure/quick-search-modal')
+);
+
 const sideBarOpenAtom = atomWithStorage('sideBarOpen', true);
 
 const logger = new DebugLogger('workspace-layout');

apps/web/src/providers/ModalProvider.tsx

@@ -1,4 +1,5 @@
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
+import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
 import React, { useCallback } from 'react';
 
@@ -7,12 +8,20 @@ import {
   openCreateWorkspaceModalAtom,
   openWorkspacesModalAtom,
 } from '../atoms';
-import { CreateWorkspaceModal } from '../components/pure/create-workspace-modal';
-import { WorkspaceListModal } from '../components/pure/workspace-list-modal';
 import { useCurrentUser } from '../hooks/current/use-current-user';
 import { useWorkspaces, useWorkspacesHelper } from '../hooks/use-workspaces';
 import { apis } from '../shared/apis';
 
+const WorkspaceListModal = dynamic(
+  async () =>
+    (await import('../components/pure/workspace-list-modal')).WorkspaceListModal
+);
+const CreateWorkspaceModal = dynamic(
+  async () =>
+    (await import('../components/pure/create-workspace-modal'))
+      .CreateWorkspaceModal
+);
+
 export function Modals() {
   const [openWorkspacesModal, setOpenWorkspacesModal] = useAtom(
     openWorkspacesModalAtom