lorentz
5f7fc29e67
- Initial-load placeholder for /mobile/finance (D-17) - 2x2 KPI grid (h-20) + 3-cell aging row (h-16) + 2x list-row blocks (3 rows each) - Uses Skeleton primitive from components/ui/skeleton - Locked spacing tokens: px-4 py-4, space-y-6, gap-3, gap-2, space-y-3 - No props, no Card wrapper, no custom animation per UI-SPEC
47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
'use client';
|
||
|
||
/* FinanceSkeleton — phase 05 (FIN-01).
|
||
* Purpose: initial-load placeholder for /mobile/finance.
|
||
* Layout: 4 KPI tile skeletons (2×2 grid) + 1 aging row (3 cells) + 2 list-row skeleton blocks (3 rows each).
|
||
* Pure presentational — no props.
|
||
* UI-SPEC §"Skeleton Loading State [D-17]". */
|
||
|
||
import { Skeleton } from '@/components/ui/skeleton';
|
||
|
||
export function FinanceSkeleton() {
|
||
const listRowSkeleton = (
|
||
<div className="space-y-3">
|
||
{[0, 1, 2].map((i) => (
|
||
<div key={i} className="px-4 py-3 flex justify-between gap-2">
|
||
<Skeleton className="h-4 w-2/3" />
|
||
<Skeleton className="h-4 w-16" />
|
||
</div>
|
||
))}
|
||
</div>
|
||
);
|
||
|
||
return (
|
||
<div className="px-4 py-4 space-y-6">
|
||
{/* 4 KPI tile skeletons — 2×2 grid */}
|
||
<div className="grid grid-cols-2 gap-3">
|
||
<Skeleton className="h-20 rounded-xl" />
|
||
<Skeleton className="h-20 rounded-xl" />
|
||
<Skeleton className="h-20 rounded-xl" />
|
||
<Skeleton className="h-20 rounded-xl" />
|
||
</div>
|
||
|
||
{/* Aging row skeleton — 3 cells */}
|
||
<div className="grid grid-cols-3 gap-2">
|
||
<Skeleton className="h-16 rounded-xl" />
|
||
<Skeleton className="h-16 rounded-xl" />
|
||
<Skeleton className="h-16 rounded-xl" />
|
||
</div>
|
||
|
||
{/* Invoice list-row skeletons */}
|
||
{listRowSkeleton}
|
||
|
||
{/* Payment list-row skeletons */}
|
||
{listRowSkeleton}
|
||
</div>
|
||
);
|
||
}
|