fix(mobile): use mobile app-fallback in app-container (#8804)

close AF-1633

packages/frontend/core/src/mobile/components/index.ts

@@ -3,6 +3,5 @@ export * from './doc-card';
 export * from './rename';
 export * from './search-input';
 export * from './search-result';
-export * from './skeletons';
 export * from './user-plan-tag';
 export * from './workspace-selector';

packages/frontend/core/src/mobile/components/skeletons/app-fallback.tsx

@@ -1,85 +0,0 @@
-import { SafeArea, Skeleton } from '@affine/component';
-
-import { WorkspaceSelector } from '../workspace-selector';
-
-const SectionTitleFallback = () => {
-  return (
-    <div style={{ padding: '0 16px' }}>
-      <Skeleton
-        animation="wave"
-        style={{ height: 16, borderRadius: 4, width: 93 }}
-      />
-    </div>
-  );
-};
-const sectionRows = [127, 238, 191, 102];
-
-const Section = () => {
-  return (
-    <div style={{ marginBottom: 32 }}>
-      <SectionTitleFallback />
-      <div
-        style={{
-          padding: '0 16px',
-          display: 'flex',
-          flexDirection: 'column',
-          gap: 24,
-          marginTop: 24,
-        }}
-      >
-        {sectionRows.map((width, i) => {
-          return (
-            <div
-              style={{ display: 'flex', gap: 16, alignItems: 'center' }}
-              key={i}
-            >
-              <Skeleton
-                animation="wave"
-                style={{ width: 23, height: 23, borderRadius: 4 }}
-              />
-              <Skeleton
-                animation="wave"
-                style={{ width, height: 16, borderRadius: 4 }}
-              />
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-};
-
-export const AppFallback = () => {
-  return (
-    <SafeArea top bottom style={{ height: '100dvh', overflow: 'hidden' }}>
-      {/* setting */}
-      <div style={{ padding: 10, display: 'flex', justifyContent: 'end' }}>
-        <Skeleton
-          animation="wave"
-          style={{ width: 23, height: 23, borderRadius: 4 }}
-        />
-      </div>
-      {/* workspace card */}
-      <div style={{ padding: '4px 16px' }}>
-        <WorkspaceSelector />
-      </div>
-      {/* search */}
-      <div style={{ padding: '10px 16px 15px' }}>
-        <Skeleton animation="wave" style={{ height: 44, borderRadius: 10 }} />
-      </div>
-      {/* recent */}
-      <SectionTitleFallback />
-      <div style={{ padding: '16px 16px 32px 16px', display: 'flex', gap: 10 }}>
-        {[1, 2, 3].map(i => (
-          <Skeleton
-            key={i}
-            animation="wave"
-            style={{ width: 172, height: 210, borderRadius: 12 }}
-          />
-        ))}
-      </div>
-      <Section />
-      <Section />
-    </SafeArea>
-  );
-};

packages/frontend/core/src/mobile/components/skeletons/index.tsx

@@ -1 +0,0 @@
-export * from './app-fallback';

packages/frontend/core/src/mobile/pages/workspace/layout.tsx

@@ -6,6 +6,7 @@ import {
 } from '@affine/core/components/affine/quota-reached-modal';
 import { SWRConfigProvider } from '@affine/core/components/providers/swr-config-provider';
 import { WorkspaceSideEffects } from '@affine/core/components/providers/workspace-side-effects';
+import { AppContainer } from '@affine/core/desktop/components/app-container';
 import { PeekViewManagerModal } from '@affine/core/modules/peek-view';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import type { Workspace, WorkspaceMetadata } from '@toeverything/infra';
@@ -23,7 +24,6 @@ import {
   useState,
 } from 'react';
 
-import { AppFallback } from '../../components';
 import { WorkspaceDialogs } from '../../dialogs';
 
 // TODO(@forehalo): reuse the global context with [core/electron]
@@ -91,7 +91,7 @@ export const WorkspaceLayout = ({
   }
 
   if (!isRootDocReady) {
-    return <AppFallback />;
+    return <AppContainer fallback />;
   }
 
   return (