ui phase 1

2026-07-17 17:10:39 +03:30
parent f1cba6cf74
commit 370c1beefa
151 changed files with 4254 additions and 1840 deletions
@@ -0,0 +1,37 @@
+import Skeleton from '@mui/material/Skeleton';
+import Stack from '@mui/material/Stack';
+import Box from '@mui/material/Box';
+import SurfaceCard from '@/components/common/SurfaceCard';
+import { CONTENT_MAX_WIDTH } from '@/components/config';
+
+/**
+ * The (customer) home shell shape: greeting/avatar + search bar + a category-tile row + a short card
+ * stack — mirrors A5 (`(customer)/page.tsx`) closely enough that switching from skeleton to real content
+ * doesn't jump. `CustomerLayout` (top bar + bottom tabs) is already rendered by the enclosing layout.
+ */
+export default function Loading() {
+  return (
+    <Box sx={{ maxWidth: CONTENT_MAX_WIDTH, mx: 'auto', width: '100%' }}>
+      <Stack sx={{ gap: 2.5 }}>
+        <Stack direction="row" sx={{ gap: 1.5, alignItems: 'center' }}>
+          <Skeleton variant="circular" width={48} height={48} />
+          <Skeleton variant="text" width="45%" height={28} />
+        </Stack>
+        <Skeleton variant="rounded" height={48} sx={{ borderRadius: 'var(--bal-radius-sm)' }} />
+        <Stack direction="row" sx={{ gap: 1.5, flexWrap: 'wrap' }}>
+          {[0, 1, 2, 3].map((key) => (
+            <Skeleton key={key} variant="rounded" width={92} height={92} sx={{ borderRadius: 'var(--bal-radius-md)' }} />
+          ))}
+        </Stack>
+        {[0, 1].map((key) => (
+          <SurfaceCard key={key}>
+            <Stack sx={{ gap: 0.75 }}>
+              <Skeleton variant="text" width="50%" height={22} />
+              <Skeleton variant="text" width="80%" height={18} />
+            </Stack>
+          </SurfaceCard>
+        ))}
+      </Stack>
+    </Box>
+  );
+}