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

close AF-1633

packages/frontend/core/src/desktop/components/app-container/index.tsx

@@ -22,6 +22,7 @@ import {
   type ReactElement,
 } from 'react';
 
+import { AppFallback } from './mobile';
 import * as styles from './styles.css';
 
 export const AppContainer = ({
@@ -102,7 +103,23 @@ const BrowserLayout = ({
   );
 };
 
-const LayoutComponent = BUILD_CONFIG.isElectron ? DesktopLayout : BrowserLayout;
+const MobileLayout = ({
+  children,
+  fallback = false,
+}: PropsWithChildren<{ fallback?: boolean }>) => {
+  return (
+    <div className={styles.browserAppViewContainer}>
+      {fallback ? <AppFallback /> : null}
+      <MainContainer>{children}</MainContainer>
+    </div>
+  );
+};
+
+const LayoutComponent = BUILD_CONFIG.isElectron
+  ? DesktopLayout
+  : BUILD_CONFIG.isMobileEdition
+    ? MobileLayout
+    : BrowserLayout;
 
 const MainContainer = forwardRef<
   HTMLDivElement,

packages/frontend/core/src/desktop/components/app-container/mobile.tsx

@@ -0,0 +1,84 @@
+import { SafeArea, Skeleton } from '@affine/component';
+import { WorkspaceSelector } from '@affine/core/mobile/components';
+
+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>
+  );
+};