feat(core): allow switch workspace in loading fallback (#6129)

packages/frontend/core/src/app.tsx

@@ -7,13 +7,15 @@ import { NotificationCenter } from '@affine/component/notification-center';
 import { createI18n, setUpLanguage } from '@affine/i18n';
 import { CacheProvider } from '@emotion/react';
 import { getCurrentStore } from '@toeverything/infra/atom';
-import { ServiceCollection } from '@toeverything/infra/di';
+import {
+  ServiceCollection,
+  ServiceProviderContext,
+} from '@toeverything/infra/di';
 import type { PropsWithChildren, ReactElement } from 'react';
 import { lazy, memo, Suspense } from 'react';
 import { RouterProvider } from 'react-router-dom';
 
 import { WorkspaceFallback } from './components/workspace';
-import { GlobalScopeProvider } from './modules/infra-web/global-scope';
 import { CloudSessionProvider } from './providers/session-provider';
 import { router } from './router';
 import { performanceLogger, performanceRenderLogger } from './shared';
@@ -68,7 +70,7 @@ export const App = memo(function App() {
 
   return (
     <Suspense>
-      <GlobalScopeProvider provider={serviceProvider}>
+      <ServiceProviderContext.Provider value={serviceProvider}>
         <CacheProvider value={cache}>
           <AffineContext store={getCurrentStore()}>
             <CloudSessionProvider>
@@ -86,7 +88,7 @@ export const App = memo(function App() {
             </CloudSessionProvider>
           </AffineContext>
         </CacheProvider>
-      </GlobalScopeProvider>
+      </ServiceProviderContext.Provider>
     </Suspense>
   );
 });

packages/frontend/core/src/components/app-sidebar/index.tsx

@@ -1,10 +1,13 @@
 import { Skeleton } from '@affine/component';
 import { ResizePanel } from '@affine/component/resize-panel';
+import { Workspace } from '@toeverything/infra';
+import { useServiceOptional } from '@toeverything/infra/di';
 import { useAtom, useAtomValue } from 'jotai';
 import { debounce } from 'lodash-es';
 import type { PropsWithChildren, ReactElement } from 'react';
 import { useEffect } from 'react';
 
+import { WorkspaceSelector } from '../workspace-selector';
 import { fallbackHeaderStyle, fallbackStyle } from './fallback.css';
 import {
   floatingMaxWidth,
@@ -113,6 +116,8 @@ export function AppSidebar(props: AppSidebarProps): ReactElement {
 
 export const AppSidebarFallback = (): ReactElement | null => {
   const width = useAtomValue(appSidebarWidthAtom);
+
+  const currentWorkspace = useServiceOptional(Workspace);
   return (
     <div
       style={{ width }}
@@ -125,8 +130,14 @@ export const AppSidebarFallback = (): ReactElement | null => {
         <div className={navBodyStyle}>
           <div className={fallbackStyle}>
             <div className={fallbackHeaderStyle}>
-              <Skeleton variant="circular" width={40} height={40} />
-              <Skeleton variant="rectangular" width={150} height={40} />
+              {currentWorkspace ? (
+                <WorkspaceSelector />
+              ) : (
+                <>
+                  <Skeleton variant="circular" width={40} height={40} />
+                  <Skeleton variant="rectangular" width={150} height={40} />
+                </>
+              )}
             </div>
           </div>
         </div>

packages/frontend/core/src/components/pure/workspace-slider-bar/workspace-card/styles.ts

@@ -7,6 +7,7 @@ export const StyledSelectorContainer = styled('div')({
   padding: '0 6px',
   borderRadius: '8px',
   outline: 'none',
+  width: '100%',
   color: 'var(--affine-text-primary-color)',
   ':hover': {
     cursor: 'pointer',

packages/frontend/core/src/components/root-app-sidebar/index.tsx

@@ -1,5 +1,4 @@
 import { AnimatedDeleteIcon } from '@affine/component';
-import { Menu } from '@affine/component/ui/menu';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import { CollectionService } from '@affine/core/modules/collection';
 import { apis, events } from '@affine/electron-api';
@@ -8,12 +7,11 @@ import { FolderIcon, SettingsIcon } from '@blocksuite/icons';
 import { type Doc } from '@blocksuite/store';
 import { useDroppable } from '@dnd-kit/core';
 import { useLiveData, useService, type Workspace } from '@toeverything/infra';
-import { useAtom, useAtomValue } from 'jotai';
+import { useAtomValue } from 'jotai';
 import { nanoid } from 'nanoid';
 import type { HTMLAttributes, ReactElement } from 'react';
-import { forwardRef, Suspense, useCallback, useEffect } from 'react';
+import { forwardRef, useCallback, useEffect } from 'react';
 
-import { openWorkspaceListModalAtom } from '../../atoms';
 import { useAppSettingHelper } from '../../hooks/affine/use-app-setting-helper';
 import { useDeleteCollectionInfo } from '../../hooks/affine/use-delete-collection-info';
 import { getDropItemId } from '../../hooks/affine/use-sidebar-drag';
@@ -41,8 +39,7 @@ import { CollectionsList } from '../pure/workspace-slider-bar/collections';
 import { AddCollectionButton } from '../pure/workspace-slider-bar/collections/add-collection-button';
 import { AddFavouriteButton } from '../pure/workspace-slider-bar/favorite/add-favourite-button';
 import FavoriteList from '../pure/workspace-slider-bar/favorite/favorite-list';
-import { UserWithWorkspaceList } from '../pure/workspace-slider-bar/user-with-workspace-list';
-import { WorkspaceCard } from '../pure/workspace-slider-bar/workspace-card';
+import { WorkspaceSelector } from '../workspace-selector';
 import ImportPage from './import-page';
 import { AppSidebarJournalButton } from './journal-button';
 import { UpdaterButton } from './updater-button';
@@ -102,9 +99,6 @@ export const RootAppSidebar = ({
   const { appSettings } = useAppSettingHelper();
   const docCollection = currentWorkspace.docCollection;
   const t = useAFFiNEI18N();
-  const [openUserWorkspaceList, setOpenUserWorkspaceList] = useAtom(
-    openWorkspaceListModalAtom
-  );
   const currentPath = useLiveData(useService(Workbench).location).pathname;
 
   const onClickNewPage = useAsyncCallback(async () => {
@@ -149,10 +143,6 @@ export const RootAppSidebar = ({
   const trashDroppable = useDroppable({
     id: dropItemId,
   });
-  const closeUserWorkspaceList = useCallback(() => {
-    setOpenUserWorkspaceList(false);
-  }, [setOpenUserWorkspaceList]);
-  const userInfo = useDeleteCollectionInfo();
 
   const collection = useService(CollectionService);
   const { node, open } = useEditCollectionName({
@@ -170,6 +160,7 @@ export const RootAppSidebar = ({
         console.error(err);
       });
   }, [docCollection.id, collection, navigateHelper, open]);
+  const userInfo = useDeleteCollectionInfo();
 
   const allPageActive = currentPath === '/all';
 
@@ -188,31 +179,7 @@ export const RootAppSidebar = ({
         titles={deletePageTitles}
       />
       <SidebarContainer>
-        <Menu
-          rootOptions={{
-            open: openUserWorkspaceList,
-          }}
-          items={
-            <Suspense>
-              <UserWithWorkspaceList onEventEnd={closeUserWorkspaceList} />
-            </Suspense>
-          }
-          contentOptions={{
-            // hide trigger
-            sideOffset: -58,
-            onInteractOutside: closeUserWorkspaceList,
-            onEscapeKeyDown: closeUserWorkspaceList,
-            style: {
-              width: '300px',
-            },
-          }}
-        >
-          <WorkspaceCard
-            onClick={useCallback(() => {
-              setOpenUserWorkspaceList(true);
-            }, [setOpenUserWorkspaceList])}
-          />
-        </Menu>
+        <WorkspaceSelector />
         <QuickSearchInput
           data-testid="slider-bar-quick-search-button"
           onClick={onOpenQuickSearchModal}

packages/frontend/core/src/components/workspace-selector/index.tsx

@@ -0,0 +1,43 @@
+import { Menu } from '@affine/component';
+import { useAtom } from 'jotai';
+import { Suspense, useCallback } from 'react';
+
+import { openWorkspaceListModalAtom } from '../../atoms';
+import { UserWithWorkspaceList } from '../pure/workspace-slider-bar/user-with-workspace-list';
+import { WorkspaceCard } from '../pure/workspace-slider-bar/workspace-card';
+
+export const WorkspaceSelector = () => {
+  const [isUserWorkspaceListOpened, setOpenUserWorkspaceList] = useAtom(
+    openWorkspaceListModalAtom
+  );
+  const closeUserWorkspaceList = useCallback(() => {
+    setOpenUserWorkspaceList(false);
+  }, [setOpenUserWorkspaceList]);
+  const openUserWorkspaceList = useCallback(() => {
+    setOpenUserWorkspaceList(true);
+  }, [setOpenUserWorkspaceList]);
+
+  return (
+    <Menu
+      rootOptions={{
+        open: isUserWorkspaceListOpened,
+      }}
+      items={
+        <Suspense>
+          <UserWithWorkspaceList onEventEnd={closeUserWorkspaceList} />
+        </Suspense>
+      }
+      contentOptions={{
+        // hide trigger
+        sideOffset: -58,
+        onInteractOutside: closeUserWorkspaceList,
+        onEscapeKeyDown: closeUserWorkspaceList,
+        style: {
+          width: '300px',
+        },
+      }}
+    >
+      <WorkspaceCard onClick={openUserWorkspaceList} />
+    </Menu>
+  );
+};

packages/frontend/core/src/pages/workspace/index.tsx

@@ -1,14 +1,7 @@
 import { useWorkspace } from '@affine/core/hooks/use-workspace';
-import {
-  Workspace,
-  WorkspaceListService,
-  WorkspaceManager,
-} from '@toeverything/infra';
-import {
-  ServiceProviderContext,
-  useService,
-  useServiceOptional,
-} from '@toeverything/infra/di';
+import type { Workspace } from '@toeverything/infra';
+import { WorkspaceListService, WorkspaceManager } from '@toeverything/infra';
+import { ServiceProviderContext, useService } from '@toeverything/infra/di';
 import { useLiveData } from '@toeverything/infra/livedata';
 import { type ReactElement, Suspense, useEffect, useMemo } from 'react';
 import { useParams } from 'react-router-dom';
@@ -20,6 +13,10 @@ import { WorkspaceLayout } from '../../layouts/workspace-layout';
 import { RightSidebarContainer } from '../../modules/right-sidebar';
 import { WorkbenchRoot } from '../../modules/workbench';
 import { CurrentWorkspaceService } from '../../modules/workspace/current-workspace';
+import {
+  AllWorkspaceModals,
+  CurrentWorkspaceModals,
+} from '../../providers/modal-provider';
 import { performanceRenderLogger } from '../../shared';
 import { PageNotFound } from '../404';
 
@@ -72,8 +69,6 @@ export const Component = (): ReactElement => {
     localStorage.setItem('last_workspace_id', workspace.id);
   }, [meta, workspaceManager, workspace, currentWorkspaceService]);
 
-  const currentWorkspace = useServiceOptional(Workspace);
-
   //  avoid doing operation, before workspace is loaded
   const isRootDocLoaded = useLiveData(workspace?.engine.sync.isRootDocLoaded);
 
@@ -82,12 +77,22 @@ export const Component = (): ReactElement => {
     return <PageNotFound />;
   }
 
-  if (!currentWorkspace || !isRootDocLoaded) {
+  if (!workspace) {
     return <WorkspaceFallback key="workspaceLoading" />;
   }
 
+  if (!isRootDocLoaded) {
+    return (
+      <ServiceProviderContext.Provider value={workspace.services}>
+        <WorkspaceFallback key="workspaceLoading" />
+        <AllWorkspaceModals />
+        <CurrentWorkspaceModals />
+      </ServiceProviderContext.Provider>
+    );
+  }
+
   return (
-    <ServiceProviderContext.Provider value={currentWorkspace.services}>
+    <ServiceProviderContext.Provider value={workspace.services}>
       <Suspense fallback={<WorkspaceFallback key="workspaceFallback" />}>
         <AffineErrorBoundary height="100vh">
           <WorkspaceLayout>