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

apps/web/src/pages/_app.tsx

@@ -1,6 +1,7 @@
 import '@affine/component/theme/global.css';
 import '@affine/component/theme/theme.css';
 
+import { WorkspaceFallback } from '@affine/component/workspace';
 import { config, setupGlobal } from '@affine/env';
 import { createI18n, I18nextProvider } from '@affine/i18n';
 import { rootStore } from '@affine/workspace/atom';
@@ -15,7 +16,6 @@ import React, { lazy, Suspense, useEffect, useMemo } from 'react';
 
 import { AffineErrorBoundary } from '../components/affine/affine-error-eoundary';
 import { ProviderComposer } from '../components/provider-composer';
-import { PageLoading } from '../components/pure/loading';
 import { MessageCenter } from '../components/pure/message-center';
 import { ThemeProvider } from '../providers/theme-provider';
 import type { NextPageWithLayout } from '../shared';
@@ -66,7 +66,7 @@ const App = function App({
       <I18nextProvider i18n={i18n}>
         <MessageCenter />
         <AffineErrorBoundary router={useRouter()}>
-          <Suspense fallback={<PageLoading key="RootPageLoading" />}>
+          <Suspense fallback={<WorkspaceFallback key="RootPageLoading" />}>
             <ProviderComposer
               contexts={useMemo(
                 () =>

apps/web/src/pages/index.tsx

@@ -1,5 +1,4 @@
 import { DebugLogger } from '@affine/debug';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import type { NextPage } from 'next';
 import { useRouter } from 'next/router';
 import { Suspense, useEffect } from 'react';
@@ -63,9 +62,8 @@ const IndexPageInner = () => {
 };
 
 const IndexPage: NextPage = () => {
-  const t = useAFFiNEI18N();
   return (
-    <Suspense fallback={<PageLoading text={t['Loading All Workspaces']()} />}>
+    <Suspense fallback={<PageLoading />}>
       <IndexPageInner />
     </Suspense>
   );