feat(component): improve fallback skeleton (#2323)

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

@@ -2,12 +2,12 @@ import {
   AppContainer,
   MainContainer,
   ToolContainer,
+  WorkspaceFallback,
 } from '@affine/component/workspace';
 import { DebugLogger } from '@affine/debug';
 import { DEFAULT_HELLO_WORLD_PAGE_ID } from '@affine/env';
 import { initPage } from '@affine/env/blocksuite';
 import { setUpLanguage, useI18N } from '@affine/i18n';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { createAffineGlobalChannel } from '@affine/workspace/affine/sync';
 import {
   rootCurrentPageIdAtom,
@@ -31,7 +31,6 @@ import {
   publicWorkspaceIdAtom,
 } from '../atoms/public-workspace';
 import { HelpIsland } from '../components/pure/help-island';
-import { PageLoading } from '../components/pure/loading';
 import { RootAppSidebar } from '../components/root-app-sidebar';
 import { useCurrentWorkspace } from '../hooks/current/use-current-workspace';
 import { useRouterHelper } from '../hooks/use-router-helper';
@@ -141,15 +140,14 @@ export const CurrentWorkspaceContext = ({
   useRouterWithWorkspaceIdDefense(router);
   const metadata = useAtomValue(rootWorkspacesMetadataAtom);
   const exist = metadata.find(m => m.id === workspaceId);
-  const t = useAFFiNEI18N();
   if (!router.isReady) {
-    return <PageLoading text={t['Router is Loading']()} />;
+    return <WorkspaceFallback key="router-is-loading" />;
   }
   if (!workspaceId) {
-    return <PageLoading text={t['Finding Workspace ID']()} />;
+    return <WorkspaceFallback key="finding-workspace-id" />;
   }
   if (!exist) {
-    return <PageLoading text={t['Workspace Not Found']()} />;
+    return <WorkspaceFallback key="workspace-not-found" />;
   }
   return <>{children}</>;
 };
@@ -157,7 +155,6 @@ export const CurrentWorkspaceContext = ({
 export const WorkspaceLayout: FC<PropsWithChildren> =
   function WorkspacesSuspense({ children }) {
     const i18n = useI18N();
-    const t = useAFFiNEI18N();
     useEffect(() => {
       document.documentElement.lang = i18n.language;
       // todo(himself65): this is a hack, we should use a better way to set the language
@@ -233,9 +230,7 @@ export const WorkspaceLayout: FC<PropsWithChildren> =
           </CurrentWorkspaceContext>
         </AllWorkspaceContext>
         <CurrentWorkspaceContext>
-          <Suspense
-            fallback={<PageLoading text={t['Finding Current Workspace']()} />}
-          >
+          <Suspense fallback={<WorkspaceFallback />}>
             <Provider>
               <WorkspaceLayoutInner>{children}</WorkspaceLayoutInner>
             </Provider>
@@ -251,7 +246,6 @@ export const WorkspaceLayoutInner: FC<PropsWithChildren> = ({ children }) => {
   const currentPageId = useAtomValue(rootCurrentPageIdAtom);
   const router = useRouter();
   const { jumpToPage } = useRouterHelper(router);
-  const t = useAFFiNEI18N();
 
   //#region init workspace
   if (currentWorkspace.blockSuiteWorkspace.isEmpty) {
@@ -360,9 +354,7 @@ export const WorkspaceLayoutInner: FC<PropsWithChildren> = ({ children }) => {
           paths={isPublicWorkspace ? publicPathGenerator : pathGenerator}
         />
         <MainContainer>
-          <Suspense fallback={<PageLoading text={t['Page is Loading']()} />}>
-            {children}
-          </Suspense>
+          <Suspense fallback={<WorkspaceFallback />}>{children}</Suspense>
           <ToolContainer>
             {/* fixme(himself65): remove this */}
             <div id="toolWrapper" style={{ marginBottom: '12px' }}>