Iteratie 1 - Parallel Fetching: - Patient dashboard: Promise.all voor 3 data fetches - Resultaat: ~45% sneller (800ms → 440ms) Iteratie 2 - Loading States: - Skeleton loaders voor EPD, patient, agenda, rapportage - Betere perceived performance tijdens laden Iteratie 3 - Lazy Load FullCalendar: - Dynamic import met next/dynamic (ssr: false) - ~150KB minder in initiële bundle Iteratie 4 - Reports API Optimalisatie: - Selectieve kolommen (10 i.p.v. 20) - Server-side pagination (limit/offset) - Database indexes voor timeline queries - Resultaat: 89% sneller (1671ms → 188ms) Overige fixes: - Type casts voor Json → Behandelstructuur/SmartGoal/etc. - Metadata template fix in layout.tsx Documentatie: - docs/audit-rapport.md - PO-vriendelijk audit rapport - docs/performance/baseline-2025-12-12.md - Metingen + resultaten 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
28 lines
928 B
TypeScript
28 lines
928 B
TypeScript
export default function PatientLoading() {
|
|
return (
|
|
<div className="p-6 space-y-6">
|
|
{/* Header skeleton */}
|
|
<div className="flex items-center gap-4">
|
|
<div className="h-12 w-12 bg-slate-200 rounded-full animate-pulse" />
|
|
<div className="space-y-2">
|
|
<div className="h-6 w-48 bg-slate-200 rounded animate-pulse" />
|
|
<div className="h-4 w-32 bg-slate-100 rounded animate-pulse" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Cards skeleton */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
{[1, 2, 3].map((i) => (
|
|
<div key={i} className="h-32 bg-slate-100 rounded-lg animate-pulse" />
|
|
))}
|
|
</div>
|
|
|
|
{/* Content skeleton */}
|
|
<div className="space-y-4">
|
|
<div className="h-8 w-64 bg-slate-200 rounded animate-pulse" />
|
|
<div className="h-48 bg-slate-100 rounded-lg animate-pulse" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|