Benjamin Sutter
68 lines
2.0 KiB
TypeScript
68 lines
2.0 KiB
TypeScript
import { Box, Card, CardContent, Skeleton } from '@mui/material'
|
|
|
|
function SkeletonCard() {
|
|
return (
|
|
<Card>
|
|
<CardContent sx={{ p: 2.5 }}>
|
|
<Skeleton variant="text" width="60%" height={20} />
|
|
<Skeleton variant="text" width="40%" height={40} sx={{ mt: 1 }} />
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
function SkeletonLargeCard() {
|
|
return (
|
|
<Card>
|
|
<CardContent sx={{ p: 2.5 }}>
|
|
<Skeleton variant="text" width="50%" height={28} sx={{ mb: 2 }} />
|
|
<Skeleton variant="rectangular" height={120} sx={{ borderRadius: 1, mb: 1 }} />
|
|
<Skeleton variant="rectangular" height={80} sx={{ borderRadius: 1 }} />
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export function DashboardSkeleton() {
|
|
return (
|
|
<Box sx={{ p: 3, display: 'flex', flexDirection: 'column', gap: 3 }}>
|
|
{/* Header skeleton */}
|
|
<Box sx={{ pb: 2 }}>
|
|
<Skeleton variant="text" width={240} height={32} />
|
|
<Skeleton variant="text" width={360} height={20} sx={{ mt: 0.5 }} />
|
|
</Box>
|
|
|
|
{/* KPI grid skeleton */}
|
|
<Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 2 }}>
|
|
{Array.from({ length: 6 }).map((_, i) => (
|
|
<SkeletonCard key={i} />
|
|
))}
|
|
</Box>
|
|
|
|
{/* Row 2 */}
|
|
<Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 3 }}>
|
|
<SkeletonLargeCard />
|
|
<SkeletonLargeCard />
|
|
</Box>
|
|
|
|
{/* Row 3 */}
|
|
<Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 3 }}>
|
|
<SkeletonLargeCard />
|
|
<SkeletonLargeCard />
|
|
</Box>
|
|
|
|
{/* Quick actions skeleton */}
|
|
<Card>
|
|
<CardContent sx={{ p: 2.5 }}>
|
|
<Skeleton variant="text" width="30%" height={28} sx={{ mb: 2 }} />
|
|
<Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1.5 }}>
|
|
{Array.from({ length: 6 }).map((_, i) => (
|
|
<Skeleton key={i} variant="rectangular" height={36} sx={{ borderRadius: 1 }} />
|
|
))}
|
|
</Box>
|
|
</CardContent>
|
|
</Card>
|
|
</Box>
|
|
)
|
|
}
|