mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-13 14:32:03 +00:00
Marc-André Bombeck
04765ea8ac
Icons inside buttons drop their manual margins in favour of the button's built-in gap (two hundred call sites), form field stacks settle on one spacing step, card titles on exactly two sizes, inline field errors on one text size, and a dozen hand-rolled loading pulses move onto the shared skeleton primitive while keeping their silhouettes. The intake dialog wording joins the rest of the app on 'übersprungen', and the UI guidelines now document the two deliberate footer and touch-target systems.
39 lines
1.5 KiB
TypeScript
39 lines
1.5 KiB
TypeScript
/**
|
|
* v1.8.3 — route-level loading skeleton for every `/insights/*` segment.
|
|
*
|
|
* Defense-in-depth for the navigation-freeze class: any RSC await on an
|
|
* insights route (now or in a future refactor) streams this skeleton
|
|
* instead of blocking the transition. The geometry mirrors `SubPageShell`
|
|
* (heading + chart card + assessment card) so the post-load swap reflows
|
|
* by less than a row. Pure server component — no client hooks, no data
|
|
* fetch; Next.js renders it instantly while the segment streams.
|
|
*/
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
export default function InsightsLoading() {
|
|
return (
|
|
<div data-slot="insights-subpage-loading" className="space-y-6">
|
|
<header className="space-y-2">
|
|
<Skeleton className="bg-muted h-7 w-48 rounded" />
|
|
<Skeleton className="bg-muted/70 h-4 w-72 rounded" />
|
|
</header>
|
|
|
|
{/* Chart card */}
|
|
<div className="bg-card rounded-xl border p-4">
|
|
<Skeleton className="bg-muted mb-4 h-4 w-32 rounded" />
|
|
<Skeleton className="h-56 w-full rounded-lg" />
|
|
</div>
|
|
|
|
{/* Assessment card */}
|
|
<div className="bg-card space-y-2 rounded-xl border p-4">
|
|
<div className="flex items-center gap-2">
|
|
<Skeleton className="bg-muted h-5 w-5 rounded" />
|
|
<Skeleton className="bg-muted h-4 w-40 rounded" />
|
|
</div>
|
|
<Skeleton className="bg-muted h-3.5 w-full rounded" />
|
|
<Skeleton className="bg-muted h-3.5 w-11/12 rounded" />
|
|
<Skeleton className="bg-muted h-3.5 w-9/12 rounded" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|