Files
triqura-ecd/app/epd/patients/[id]/loading.tsx
colinislit 0b2f55c1e4 perf: Performance optimalisaties (4 iteraties)
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>
2025-12-12 15:24:38 +01:00

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>
);
}