refactor(app): split page orchestration flows

src/app/_components/core/index.ts

@@ -9,6 +9,7 @@ export * from "./dialog";
 export * from "./fixed-bottom-area";
 export * from "./loading-indicator";
 export * from "./mobile-shell";
+export * from "./page-loading-fallback";
 export * from "./page-scaffold";
 export * from "./responsive-mobile-shell";
 export * from "./scrollable-page";

src/app/_components/core/page-loading-fallback.module.css

@@ -0,0 +1,19 @@
+.content {
+  display: grid;
+  min-height: 60vh;
+  place-items: center;
+  padding: 2rem;
+  text-align: center;
+}
+
+.neutral {
+  color: #666;
+}
+
+.dark {
+  color: rgba(255, 255, 255, 0.72);
+}
+
+.warm {
+  color: #8b6265;
+}

src/app/_components/core/page-loading-fallback.tsx

@@ -0,0 +1,20 @@
+import { MobileShell } from "./mobile-shell";
+import styles from "./page-loading-fallback.module.css";
+
+export interface PageLoadingFallbackProps {
+  children: string;
+  background?: string;
+  tone?: "neutral" | "dark" | "warm";
+}
+
+export function PageLoadingFallback({
+  children,
+  background,
+  tone = "neutral",
+}: PageLoadingFallbackProps) {
+  return (
+    <MobileShell background={background}>
+      <div className={`${styles.content} ${styles[tone]}`}>{children}</div>
+    </MobileShell>
+  );
+}