refactor: lazy load workspaces (#3091)

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

@@ -20,7 +20,6 @@ import {
   rootWorkspacesMetadataAtom,
 } from '@affine/workspace/atom';
 import { assertEquals, assertExists } from '@blocksuite/global/utils';
-import type { PassiveDocProvider } from '@blocksuite/store';
 import { nanoid } from '@blocksuite/store';
 import type { DragEndEvent } from '@dnd-kit/core';
 import {
@@ -55,10 +54,12 @@ import {
   RootAppSidebar,
 } from '../components/root-app-sidebar';
 import { useBlockSuiteMetaHelper } from '../hooks/affine/use-block-suite-meta-helper';
-import { useCurrentWorkspace } from '../hooks/current/use-current-workspace';
+import {
+  useCurrentWorkspace,
+  usePassiveWorkspaceEffect,
+} from '../hooks/current/use-current-workspace';
 import { useRouterHelper } from '../hooks/use-router-helper';
 import { useRouterTitle } from '../hooks/use-router-title';
-import { useWorkspaces } from '../hooks/use-workspaces';
 import {
   AllWorkspaceModals,
   CurrentWorkspaceModals,
@@ -96,13 +97,6 @@ export const QuickSearch: FC = () => {
   );
 };
 
-export const AllWorkspaceContext = ({
-  children,
-}: PropsWithChildren): ReactElement => {
-  useWorkspaces();
-  return <>{children}</>;
-};
-
 declare global {
   // eslint-disable-next-line no-var
   var HALTING_PROBLEM_TIMEOUT: number;
@@ -166,13 +160,11 @@ export const WorkspaceLayout: FC<PropsWithChildren> =
       <>
         {/* load all workspaces is costly, do not block the whole UI */}
         <Suspense fallback={null}>
-          <AllWorkspaceContext>
-            <AllWorkspaceModals />
-            <CurrentWorkspaceContext>
-              {/* fixme(himself65): don't re-render whole modals */}
-              <CurrentWorkspaceModals key={currentWorkspaceId} />
-            </CurrentWorkspaceContext>
-          </AllWorkspaceContext>
+          <AllWorkspaceModals />
+          <CurrentWorkspaceContext>
+            {/* fixme(himself65): don't re-render whole modals */}
+            <CurrentWorkspaceModals key={currentWorkspaceId} />
+          </CurrentWorkspaceContext>
         </Suspense>
         <CurrentWorkspaceContext>
           <Suspense fallback={<WorkspaceFallback />}>
@@ -223,36 +215,24 @@ export const WorkspaceLayoutInner: FC<PropsWithChildren> = ({ children }) => {
   }
   //#endregion
 
-  if (currentPageId) {
-    const pageExist =
-      currentWorkspace.blockSuiteWorkspace.getPage(currentPageId);
-    if (router.pathname === '/[workspaceId]/[pageId]' && !pageExist) {
-      router.push('/404').catch(console.error);
-    }
-  } else if (
-    router.pathname === '/[workspaceId]/[pageId]' &&
+  //#region check if page is valid
+  if (
     typeof router.query.pageId === 'string' &&
-    router.query.pageId !== currentPageId
+    router.pathname === '/workspace/[workspaceId]/[pageId]' &&
+    currentPageId
   ) {
-    setCurrentPageId(router.query.pageId);
-    jumpToPage(currentWorkspace.id, router.query.pageId).catch(console.error);
+    if (currentPageId !== router.query.pageId) {
+      setCurrentPageId(router.query.pageId);
+    } else {
+      const page = currentWorkspace.blockSuiteWorkspace.getPage(currentPageId);
+      if (!page) {
+        router.push('/404').catch(console.error);
+      }
+    }
   }
+  //#endregion
 
-  useEffect(() => {
-    const backgroundProviders =
-      currentWorkspace.blockSuiteWorkspace.providers.filter(
-        (provider): provider is PassiveDocProvider =>
-          'passive' in provider && provider.passive
-      );
-    backgroundProviders.forEach(provider => {
-      provider.connect();
-    });
-    return () => {
-      backgroundProviders.forEach(provider => {
-        provider.disconnect();
-      });
-    };
-  }, [currentWorkspace]);
+  usePassiveWorkspaceEffect(currentWorkspace.blockSuiteWorkspace);
 
   useEffect(() => {
     const page = currentWorkspace.blockSuiteWorkspace.getPage(
@@ -303,7 +283,7 @@ export const WorkspaceLayoutInner: FC<PropsWithChildren> = ({ children }) => {
   const handleOpenSettingModal = useCallback(() => {
     setOpenSettingModalAtom({
       activeTab: 'appearance',
-      workspace: null,
+      workspaceId: null,
       open: true,
     });
   }, [setOpenSettingModalAtom]);