refactor: new provider (#4900)

2026-02-27 02:42:25 +08:00 · 2023-11-17 15:50:01 +08:00
parent 9baad36e41
commit aa4c7407de
48 changed files with 1783 additions and 1480 deletions
--- a/packages/frontend/core/src/adapters/local/index.tsx
+++ b/packages/frontend/core/src/adapters/local/index.tsx
@@ -3,7 +3,6 @@ import {
  DEFAULT_WORKSPACE_NAME,
  PageNotFoundError,
 } from '@affine/env/constant';
-import type { LocalIndexedDBDownloadProvider } from '@affine/env/workspace';
 import type { WorkspaceAdapter } from '@affine/env/workspace';
 import {
  LoadPriority,
@@ -18,7 +17,6 @@ import {
  getOrCreateWorkspace,
  globalBlockSuiteSchema,
 } from '@affine/workspace/manager';
-import { createIndexedDBDownloadProvider } from '@affine/workspace/providers';
 import { getBlockSuiteWorkspaceAtom } from '@toeverything/infra/__internal__/workspace';
 import { getCurrentStore } from '@toeverything/infra/atom';
 import { initEmptyPage } from '@toeverything/infra/blocksuite';
@@ -66,15 +64,6 @@ export const LocalAdapter: WorkspaceAdapter<WorkspaceFlavour.LOCAL> = {
          logger.error('init page with empty failed', error);
        });
      }
-      const provider = createIndexedDBDownloadProvider(
-        blockSuiteWorkspace.id,
-        blockSuiteWorkspace.doc,
-        {
-          awareness: blockSuiteWorkspace.awarenessStore.awareness,
-        }
-      ) as LocalIndexedDBDownloadProvider;
-      provider.sync();
-      provider.whenReady.catch(console.error);
      saveWorkspaceToLocalStorage(blockSuiteWorkspace.id);
      logger.debug('create first workspace');
      return [blockSuiteWorkspace.id];
--- a/packages/frontend/core/src/components/pure/workspace-slider-bar/workspace-card/index.tsx
+++ b/packages/frontend/core/src/components/pure/workspace-slider-bar/workspace-card/index.tsx
@@ -1,4 +1,5 @@
 import { WorkspaceFlavour } from '@affine/env/workspace';
+import { SyncEngineStatus } from '@affine/workspace/providers';
 import {
  CloudWorkspaceIcon,
  LocalWorkspaceIcon,
@@ -9,16 +10,17 @@ import { Avatar } from '@toeverything/components/avatar';
 import { Tooltip } from '@toeverything/components/tooltip';
 import { useBlockSuiteWorkspaceAvatarUrl } from '@toeverything/hooks/use-block-suite-workspace-avatar-url';
 import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
-import { atom, useSetAtom } from 'jotai';
+import { debounce } from 'lodash-es';
 import {
  forwardRef,
  type HTMLAttributes,
-  type MouseEvent,
  useCallback,
+  useEffect,
  useMemo,
+  useState,
 } from 'react';

-import { useDatasourceSync } from '../../../../hooks/use-datasource-sync';
+import { useCurrentSyncEngine } from '../../../../hooks/current/use-current-sync-engine';
 import { useSystemOnline } from '../../../../hooks/use-system-online';
 import type { AllWorkspace } from '../../../../shared';
 import { Loading } from './loading-icon';
@@ -29,8 +31,6 @@ import {
  StyledWorkspaceStatus,
 } from './styles';

-const hoverAtom = atom(false);
-
 // FIXME:
 // 1. Remove mui style
 // 2. Refactor the code to improve readability
@@ -86,63 +86,62 @@ const WorkspaceStatus = ({
 }) => {
  const isOnline = useSystemOnline();

-  // todo: finish display sync status
-  const [forceSyncStatus, startForceSync] = useDatasourceSync(
-    currentWorkspace.blockSuiteWorkspace
+  const [syncEngineStatus, setSyncEngineStatus] = useState<SyncEngineStatus>(
+    SyncEngineStatus.Synced
  );

-  const setIsHovered = useSetAtom(hoverAtom);
+  const syncEngine = useCurrentSyncEngine();
+
+  useEffect(() => {
+    setSyncEngineStatus(syncEngine?.status ?? SyncEngineStatus.Synced);
+    const disposable = syncEngine?.onStatusChange.on(
+      debounce(status => {
+        setSyncEngineStatus(status);
+      }, 500)
+    );
+    return () => {
+      disposable?.dispose();
+    };
+  }, [syncEngine]);

  const content = useMemo(() => {
+    // TODO: add i18n
    if (currentWorkspace.flavour === WorkspaceFlavour.LOCAL) {
      return 'Saved locally';
    }
    if (!isOnline) {
      return 'Disconnected, please check your network connection';
    }
-    switch (forceSyncStatus.type) {
-      case 'syncing':
+    switch (syncEngineStatus) {
+      case SyncEngineStatus.Syncing:
+      case SyncEngineStatus.LoadingSubDoc:
+      case SyncEngineStatus.LoadingRootDoc:
        return 'Syncing with AFFiNE Cloud';
-      case 'error':
-        return 'Sync failed due to server issues, please try again later.';
+      case SyncEngineStatus.Retrying:
+        return 'Sync disconnected due to unexpected issues, reconnecting.';
      default:
-        return 'Sync with AFFiNE Cloud';
+        return 'Synced with AFFiNE Cloud';
    }
-  }, [currentWorkspace.flavour, forceSyncStatus.type, isOnline]);
+  }, [currentWorkspace.flavour, syncEngineStatus, isOnline]);

  const CloudWorkspaceSyncStatus = useCallback(() => {
-    if (forceSyncStatus.type === 'syncing') {
+    if (
+      syncEngineStatus === SyncEngineStatus.Syncing ||
+      syncEngineStatus === SyncEngineStatus.LoadingSubDoc ||
+      syncEngineStatus === SyncEngineStatus.LoadingRootDoc
+    ) {
      return SyncingWorkspaceStatus();
-    } else if (forceSyncStatus.type === 'error') {
+    } else if (syncEngineStatus === SyncEngineStatus.Retrying) {
      return UnSyncWorkspaceStatus();
    } else {
      return CloudWorkspaceStatus();
    }
-  }, [forceSyncStatus.type]);
+  }, [syncEngineStatus]);

-  const handleClick = useCallback(
-    (e: MouseEvent<HTMLDivElement>) => {
-      e.stopPropagation();
-      if (
-        currentWorkspace.flavour === WorkspaceFlavour.LOCAL ||
-        forceSyncStatus.type === 'syncing'
-      ) {
-        return;
-      }
-      startForceSync();
-    },
-    [currentWorkspace.flavour, forceSyncStatus.type, startForceSync]
-  );
  return (
    <div style={{ display: 'flex' }}>
      <Tooltip content={content}>
-        <StyledWorkspaceStatus
-          onMouseEnter={() => {
-            setIsHovered(true);
-          }}
-          onMouseLeave={() => setIsHovered(false)}
-          onClick={handleClick}
-        >
+        <StyledWorkspaceStatus>
          {currentWorkspace.flavour === WorkspaceFlavour.AFFINE_CLOUD ? (
            !isOnline ? (
              <OfflineStatus />
--- a/packages/frontend/core/src/components/pure/workspace-slider-bar/workspace-card/styles.ts
+++ b/packages/frontend/core/src/components/pure/workspace-slider-bar/workspace-card/styles.ts
@@ -45,10 +45,5 @@ export const StyledWorkspaceStatus = styled('div')(() => {
      color: 'var(--affine-icon-color)',
      fontSize: 'var(--affine-font-base)',
    },
-    ':hover': {
-      cursor: 'pointer',
-      borderRadius: '4px',
-      background: 'var(--affine-hover-color)',
-    },
  };
 });
--- a/packages/frontend/core/src/components/workspace-upgrade/upgrade-hooks.ts
+++ b/packages/frontend/core/src/components/workspace-upgrade/upgrade-hooks.ts
@@ -1,13 +1,7 @@
-import type {
-  AffineSocketIOProvider,
-  LocalIndexedDBBackgroundProvider,
-  SQLiteProvider,
-} from '@affine/env/workspace';
-import { assertExists } from '@blocksuite/global/utils';
 import { forceUpgradePages } from '@toeverything/infra/blocksuite';
-import { useCallback, useMemo, useState } from 'react';
-import { syncDataSourceFromDoc, syncDocFromDataSource } from 'y-provider';
+import { useCallback, useState } from 'react';

+import { useCurrentSyncEngine } from '../../hooks/current/use-current-sync-engine';
 import { useCurrentWorkspace } from '../../hooks/current/use-current-workspace';

 export type UpgradeState = 'pending' | 'upgrading' | 'done' | 'error';
@@ -17,56 +11,20 @@ export function useUpgradeWorkspace() {
  const [error, setError] = useState<Error | null>(null);

  const [workspace] = useCurrentWorkspace();
-  const providers = workspace.blockSuiteWorkspace.providers;
-  const remoteProvider: AffineSocketIOProvider | undefined = useMemo(() => {
-    return providers.find(
-      (provider): provider is AffineSocketIOProvider =>
-        provider.flavour === 'affine-socket-io'
-    );
-  }, [providers]);
-  const localProvider = useMemo(() => {
-    const sqliteProvider = providers.find(
-      (provider): provider is SQLiteProvider => provider.flavour === 'sqlite'
-    );
-    const indexedDbProvider = providers.find(
-      (provider): provider is LocalIndexedDBBackgroundProvider =>
-        provider.flavour === 'local-indexeddb-background'
-    );
-    const provider = sqliteProvider || indexedDbProvider;
-    assertExists(provider, 'no local provider');
-    return provider;
-  }, [providers]);
+  const syncEngine = useCurrentSyncEngine();

  const upgradeWorkspace = useCallback(() => {
    setState('upgrading');
    setError(null);

    (async () => {
-      await syncDocFromDataSource(
-        workspace.blockSuiteWorkspace.doc,
-        localProvider.datasource
-      );
-      if (remoteProvider) {
-        await syncDocFromDataSource(
-          workspace.blockSuiteWorkspace.doc,
-          remoteProvider.datasource
-        );
-      }
-
+      await syncEngine?.waitForSynced();
      await forceUpgradePages({
        getCurrentRootDoc: async () => workspace.blockSuiteWorkspace.doc,
        getSchema: () => workspace.blockSuiteWorkspace.schema,
      });
-      await syncDataSourceFromDoc(
-        workspace.blockSuiteWorkspace.doc,
-        localProvider.datasource
-      );
-      if (remoteProvider) {
-        await syncDataSourceFromDoc(
-          workspace.blockSuiteWorkspace.doc,
-          remoteProvider.datasource
-        );
-      }
+
+      await syncEngine?.waitForSynced();

      setState('done');
    })().catch((e: any) => {
@@ -75,10 +33,9 @@ export function useUpgradeWorkspace() {
      setState('error');
    });
  }, [
-    localProvider.datasource,
-    remoteProvider,
    workspace.blockSuiteWorkspace.doc,
    workspace.blockSuiteWorkspace.schema,
+    syncEngine,
  ]);

  return [state, error, upgradeWorkspace] as const;
--- a/packages/frontend/core/src/hooks/current/use-current-sync-engine.ts
+++ b/packages/frontend/core/src/hooks/current/use-current-sync-engine.ts
@@ -0,0 +1,33 @@
+import type { SyncEngine, SyncEngineStatus } from '@affine/workspace/providers';
+import { useEffect, useState } from 'react';
+
+import { useCurrentWorkspace } from './use-current-workspace';
+
+export function useCurrentSyncEngine(): SyncEngine | undefined {
+  const [workspace] = useCurrentWorkspace();
+  // FIXME: This is a hack to get the sync engine, we need refactor this in the future.
+  const syncEngine = (
+    workspace.blockSuiteWorkspace.providers[0] as { engine?: SyncEngine }
+  )?.engine;
+
+  return syncEngine;
+}
+
+export function useCurrentSyncEngineStatus(): SyncEngineStatus | undefined {
+  const syncEngine = useCurrentSyncEngine();
+  const [status, setStatus] = useState<SyncEngineStatus>();
+
+  useEffect(() => {
+    if (syncEngine) {
+      setStatus(syncEngine.status);
+      return syncEngine.onStatusChange.on(status => {
+        setStatus(status);
+      }).dispose;
+    } else {
+      setStatus(undefined);
+    }
+    return;
+  }, [syncEngine]);
+
+  return status;
+}
--- a/packages/frontend/core/src/hooks/use-datasource-sync.ts
+++ b/packages/frontend/core/src/hooks/use-datasource-sync.ts
@@ -1,91 +0,0 @@
-import { pushNotificationAtom } from '@affine/component/notification-center';
-import type {
-  AffineSocketIOProvider,
-  LocalIndexedDBBackgroundProvider,
-  SQLiteProvider,
-} from '@affine/env/workspace';
-import { assertExists } from '@blocksuite/global/utils';
-import type { Workspace } from '@blocksuite/store';
-import { useSetAtom } from 'jotai';
-import { startTransition, useCallback, useMemo, useState } from 'react';
-import { type Status, syncDataSource } from 'y-provider';
-
-export function useDatasourceSync(workspace: Workspace) {
-  const [status, setStatus] = useState<Status>({
-    type: 'idle',
-  });
-  const pushNotification = useSetAtom(pushNotificationAtom);
-  const providers = workspace.providers;
-  const remoteProvider: AffineSocketIOProvider | undefined = useMemo(() => {
-    return providers.find(
-      (provider): provider is AffineSocketIOProvider =>
-        provider.flavour === 'affine-socket-io'
-    );
-  }, [providers]);
-  const localProvider = useMemo(() => {
-    const sqliteProvider = providers.find(
-      (provider): provider is SQLiteProvider => provider.flavour === 'sqlite'
-    );
-    const indexedDbProvider = providers.find(
-      (provider): provider is LocalIndexedDBBackgroundProvider =>
-        provider.flavour === 'local-indexeddb-background'
-    );
-    const provider = sqliteProvider || indexedDbProvider;
-    assertExists(provider, 'no local provider');
-    return provider;
-  }, [providers]);
-  return [
-    status,
-    useCallback(() => {
-      if (!remoteProvider) {
-        return;
-      }
-      startTransition(() => {
-        setStatus({
-          type: 'syncing',
-        });
-      });
-      syncDataSource(
-        () => [
-          workspace.doc.guid,
-          ...[...workspace.doc.subdocs].map(doc => doc.guid),
-        ],
-        remoteProvider.datasource,
-        localProvider.datasource
-      )
-        .then(async () => {
-          // by default, the syncing status will show for 2.4s
-          setTimeout(() => {
-            startTransition(() => {
-              setStatus({
-                type: 'synced',
-              });
-              pushNotification({
-                title: 'Synced successfully',
-                type: 'success',
-              });
-            });
-          }, 2400);
-        })
-        .catch(error => {
-          startTransition(() => {
-            setStatus({
-              type: 'error',
-              error,
-            });
-            pushNotification({
-              title: 'Unable to Sync',
-              message: 'Server error, please try again later.',
-              type: 'error',
-            });
-          });
-        });
-    }, [
-      remoteProvider,
-      localProvider.datasource,
-      workspace.doc.guid,
-      workspace.doc.subdocs,
-      pushNotification,
-    ]),
-  ] as const;
-}
--- a/packages/frontend/core/src/layouts/workspace-layout.tsx
+++ b/packages/frontend/core/src/layouts/workspace-layout.tsx
@@ -15,7 +15,6 @@ import {
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { rootWorkspacesMetadataAtom } from '@affine/workspace/atom';
 import { assertExists } from '@blocksuite/global/utils';
-import type { Page } from '@blocksuite/store';
 import type { DragEndEvent } from '@dnd-kit/core';
 import {
  DndContext,
@@ -27,7 +26,6 @@ import {
  useSensors,
 } from '@dnd-kit/core';
 import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
-import { loadPage } from '@toeverything/hooks/use-block-suite-workspace-page';
 import { currentWorkspaceIdAtom } from '@toeverything/infra/atom';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import type { PropsWithChildren, ReactNode } from 'react';
@@ -117,30 +115,6 @@ type WorkspaceLayoutProps = {
  incompatible?: boolean;
 };

-// fix https://github.com/toeverything/AFFiNE/issues/4825
-function useLoadWorkspacePages() {
-  const [currentWorkspace] = useCurrentWorkspace();
-  const pageMetas = useBlockSuitePageMeta(currentWorkspace.blockSuiteWorkspace);
-
-  useEffect(() => {
-    if (currentWorkspace) {
-      const timer = setTimeout(() => {
-        const pageIds = pageMetas.map(meta => meta.id);
-        const pages = pageIds
-          .map(id => currentWorkspace.blockSuiteWorkspace.getPage(id))
-          .filter((p): p is Page => !!p);
-        pages.forEach(page => {
-          loadPage(page, -10).catch(e => console.error(e));
-        });
-      }, 10 * 1000); // load pages after 10s
-      return () => {
-        clearTimeout(timer);
-      };
-    }
-    return;
-  }, [currentWorkspace, pageMetas]);
-}
-
 export const WorkspaceLayout = function WorkspacesSuspense({
  children,
  incompatible = false,
@@ -255,8 +229,6 @@ export const WorkspaceLayoutInner = ({
  const inTrashPage = pageMeta?.trash ?? false;
  const setMainContainer = useSetAtom(mainContainerAtom);

-  useLoadWorkspacePages();
-
  return (
    <>
      {/* This DndContext is used for drag page from all-pages list into a folder in sidebar */}
--- a/packages/frontend/core/src/pages/share/detail-page.tsx
+++ b/packages/frontend/core/src/pages/share/detail-page.tsx
@@ -1,9 +1,9 @@
 import { MainContainer } from '@affine/component/workspace';
 import { DebugLogger } from '@affine/debug';
 import { WorkspaceFlavour } from '@affine/env/workspace';
+import type { CloudDoc } from '@affine/workspace/affine/download';
+import { downloadBinaryFromCloud } from '@affine/workspace/affine/download';
 import { getOrCreateWorkspace } from '@affine/workspace/manager';
-import { downloadBinaryFromCloud } from '@affine/workspace/providers';
-import type { CloudDoc } from '@affine/workspace/providers/cloud';
 import { assertExists } from '@blocksuite/global/utils';
 import type { Page } from '@blocksuite/store';
 import { noop } from 'foxact/noop';
@@ -30,7 +30,7 @@ type LoaderData = {
 };

 function assertDownloadResponse(
-  value: CloudDoc | boolean
+  value: CloudDoc | null
 ): asserts value is CloudDoc {
  if (
    !value ||
--- a/packages/frontend/core/src/pages/workspace/detail-page.tsx
+++ b/packages/frontend/core/src/pages/workspace/detail-page.tsx
@@ -5,20 +5,18 @@ import {
 } from '@affine/component/page-list';
 import { WorkspaceSubPath } from '@affine/env/workspace';
 import { globalBlockSuiteSchema } from '@affine/workspace/manager';
+import { SyncEngineStatus } from '@affine/workspace/providers';
 import type { EditorContainer } from '@blocksuite/editor';
 import { assertExists } from '@blocksuite/global/utils';
 import type { Page } from '@blocksuite/store';
 import {
  contentLayoutAtom,
  currentPageIdAtom,
-  currentWorkspaceAtom,
  currentWorkspaceIdAtom,
-  getCurrentStore,
 } from '@toeverything/infra/atom';
 import { useAtomValue, useSetAtom } from 'jotai';
-import { type ReactElement, useCallback } from 'react';
-import type { LoaderFunction } from 'react-router-dom';
-import { redirect } from 'react-router-dom';
+import { type ReactElement, useCallback, useEffect, useState } from 'react';
+import { type LoaderFunction, useParams } from 'react-router-dom';
 import type { Map as YMap } from 'yjs';

 import { getUIAdapter } from '../../adapters/workspace';
@@ -27,6 +25,7 @@ import { collectionsCRUDAtom } from '../../atoms/collections';
 import { currentModeAtom } from '../../atoms/mode';
 import { WorkspaceHeader } from '../../components/workspace-header';
 import { useRegisterBlocksuiteEditorCommands } from '../../hooks/affine/use-register-blocksuite-editor-commands';
+import { useCurrentSyncEngineStatus } from '../../hooks/current/use-current-sync-engine';
 import { useCurrentWorkspace } from '../../hooks/current/use-current-workspace';
 import { useNavigateHelper } from '../../hooks/use-navigate-helper';
 import { performanceRenderLogger } from '../../shared';
@@ -107,46 +106,113 @@ const DetailPageImpl = (): ReactElement => {

 export const DetailPage = (): ReactElement => {
  const [currentWorkspace] = useCurrentWorkspace();
+  const currentSyncEngineStatus = useCurrentSyncEngineStatus();
  const currentPageId = useAtomValue(currentPageIdAtom);
-  const page = currentPageId
-    ? currentWorkspace.blockSuiteWorkspace.getPage(currentPageId)
-    : null;
+  const [page, setPage] = useState<Page | null>(null);
+  const [pageLoaded, setPageLoaded] = useState<boolean>(false);

-  if (!currentPageId || !page) {
+  // load page by current page id
+  useEffect(() => {
+    if (!currentPageId) {
+      setPage(null);
+      return;
+    }
+
+    const exists = currentWorkspace.blockSuiteWorkspace.getPage(currentPageId);
+
+    if (exists) {
+      setPage(exists);
+      return;
+    }
+
+    const dispose = currentWorkspace.blockSuiteWorkspace.slots.pagesUpdated.on(
+      () => {
+        const exists =
+          currentWorkspace.blockSuiteWorkspace.getPage(currentPageId);
+
+        if (exists) {
+          setPage(exists);
+        }
+      }
+    );
+
+    return dispose.dispose;
+  }, [currentPageId, currentWorkspace]);
+
+  const navigate = useNavigateHelper();
+
+  // if sync engine has been synced and the page is null, wait 1s and jump to 404 page.
+  useEffect(() => {
+    if (currentSyncEngineStatus === SyncEngineStatus.Synced && !page) {
+      const timeout = setTimeout(() => {
+        navigate.jumpTo404();
+      }, 1000);
+      return () => {
+        clearTimeout(timeout);
+      };
+    }
+    return;
+  }, [currentSyncEngineStatus, navigate, page]);
+
+  // wait for page to be loaded
+  useEffect(() => {
+    if (page) {
+      if (!page.loaded) {
+        setPageLoaded(true);
+      } else {
+        setPageLoaded(false);
+        // call waitForLoaded to trigger load
+        page
+          .load(() => {})
+          .catch(() => {
+            // do nothing
+          });
+        return page.slots.ready.on(() => {
+          setPageLoaded(true);
+        }).dispose;
+      }
+    } else {
+      setPageLoaded(false);
+    }
+    return;
+  }, [page]);
+
+  if (!currentPageId || !page || !pageLoaded) {
    return <PageDetailSkeleton key="current-page-is-null" />;
  }
+
+  if (page.meta.jumpOnce) {
+    currentWorkspace.blockSuiteWorkspace.setPageMeta(page.id, {
+      jumpOnce: false,
+    });
+  }
+
  return <DetailPageImpl />;
 };

-export const loader: LoaderFunction = async args => {
-  const rootStore = getCurrentStore();
-  rootStore.set(contentLayoutAtom, 'editor');
-  if (args.params.workspaceId) {
-    localStorage.setItem('last_workspace_id', args.params.workspaceId);
-    rootStore.set(currentWorkspaceIdAtom, args.params.workspaceId);
-  }
-  const currentWorkspace = await rootStore.get(currentWorkspaceAtom);
-  if (args.params.pageId) {
-    const pageId = args.params.pageId;
-    localStorage.setItem('last_page_id', pageId);
-    const page = currentWorkspace.getPage(pageId);
-    if (!page) {
-      return redirect('/404');
-    }
-    if (page.meta.jumpOnce) {
-      currentWorkspace.setPageMeta(page.id, {
-        jumpOnce: false,
-      });
-    }
-    rootStore.set(currentPageIdAtom, pageId);
-  } else {
-    return redirect('/404');
-  }
+export const loader: LoaderFunction = async () => {
  return null;
 };

 export const Component = () => {
  performanceRenderLogger.info('DetailPage');

+  const setContentLayout = useSetAtom(contentLayoutAtom);
+  const setCurrentWorkspaceId = useSetAtom(currentWorkspaceIdAtom);
+  const setCurrentPageId = useSetAtom(currentPageIdAtom);
+  const params = useParams();
+
+  useEffect(() => {
+    setContentLayout('editor');
+    if (params.workspaceId) {
+      localStorage.setItem('last_workspace_id', params.workspaceId);
+      setCurrentWorkspaceId(params.workspaceId);
+    }
+    if (params.pageId) {
+      localStorage.setItem('last_page_id', params.pageId);
+      setCurrentPageId(params.pageId);
+    }
+  }, [params, setContentLayout, setCurrentPageId, setCurrentWorkspaceId]);
+
  return <DetailPage />;
 };
--- a/packages/frontend/core/src/pages/workspace/index.tsx
+++ b/packages/frontend/core/src/pages/workspace/index.tsx
@@ -7,12 +7,14 @@ import {
  getCurrentStore,
 } from '@toeverything/infra/atom';
 import { guidCompatibilityFix } from '@toeverything/infra/blocksuite';
-import type { ReactElement } from 'react';
+import { useSetAtom } from 'jotai';
+import { type ReactElement, useEffect } from 'react';
 import {
  type LoaderFunction,
  Outlet,
  redirect,
  useLoaderData,
+  useParams,
 } from 'react-router-dom';

 import { WorkspaceLayout } from '../../layouts/workspace-layout';
@@ -24,6 +26,12 @@ export const loader: LoaderFunction = async args => {
  workspaceLoaderLogger.info('start');

  const rootStore = getCurrentStore();
+
+  if (args.params.workspaceId) {
+    localStorage.setItem('last_workspace_id', args.params.workspaceId);
+    rootStore.set(currentWorkspaceIdAtom, args.params.workspaceId);
+  }
+
  const meta = await rootStore.get(rootWorkspacesMetadataAtom);
  workspaceLoaderLogger.info('meta loaded');

@@ -31,10 +39,7 @@ export const loader: LoaderFunction = async args => {
  if (!currentMetadata) {
    return redirect('/404');
  }
-  if (args.params.workspaceId) {
-    localStorage.setItem('last_workspace_id', args.params.workspaceId);
-    rootStore.set(currentWorkspaceIdAtom, args.params.workspaceId);
-  }
+
  if (!args.params.pageId) {
    rootStore.set(currentPageIdAtom, null);
  }
@@ -43,6 +48,10 @@ export const loader: LoaderFunction = async args => {
    workspaceLoaderLogger.info('get cloud workspace atom');

    const workspace = await rootStore.get(workspaceAtom);
+    if (!workspace.doc.isLoaded) {
+      await workspace.doc.whenLoaded;
+    }
+    workspaceLoaderLogger.info('workspace loaded');
    return (() => {
      guidCompatibilityFix(workspace.doc);
      const blockVersions = workspace.meta.blockVersions;
@@ -65,6 +74,17 @@ export const loader: LoaderFunction = async args => {
 export const Component = (): ReactElement => {
  performanceRenderLogger.info('WorkspaceLayout');

+  const setCurrentWorkspaceId = useSetAtom(currentWorkspaceIdAtom);
+
+  const params = useParams();
+
+  useEffect(() => {
+    if (params.workspaceId) {
+      localStorage.setItem('last_workspace_id', params.workspaceId);
+      setCurrentWorkspaceId(params.workspaceId);
+    }
+  }, [params, setCurrentWorkspaceId]);
+
  const incompatible = useLoaderData();
  return (
    <WorkspaceLayout incompatible={!!incompatible}>