hamid
38 lines
1.6 KiB
TypeScript
38 lines
1.6 KiB
TypeScript
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>
|
|
);
|
|
}
|