Files
SkyMoney/web/src/components/Skeleton.tsx

20 lines
718 B
TypeScript

export function Skeleton({ className = "" }: { className?: string }) {
return <div className={`animate-pulse rounded-[--radius-xl] bg-[color-mix(in_oklab,var(--color-ink) 70%,transparent)] ${className}`} />;
}
export function KPISkeleton() {
return <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
<Skeleton className="h-24" />
<Skeleton className="h-24" />
<Skeleton className="h-24" />
</div>;
}
export function ChartSkeleton({ tall=false }: { tall?: boolean }) {
return <Skeleton className={tall ? "h-80" : "h-64"} />;
}
export function TableSkeleton() {
return <div className="card">
<div className="section-title">Loading</div>
<Skeleton className="h-40" />
</div>;
}