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>
This commit is contained in:
colinislit
2025-12-12 15:24:38 +01:00
parent 18011731c5
commit 0b2f55c1e4
13 changed files with 686 additions and 70 deletions

View File

@@ -7,10 +7,25 @@
*/
import React, { useState, useCallback, useRef, useTransition, useEffect } from 'react';
import dynamic from 'next/dynamic';
import { startOfWeek, endOfWeek, addDays, format } from 'date-fns';
import { toast } from '@/hooks/use-toast';
import { AgendaCalendar } from './agenda-calendar';
// Lazy load FullCalendar component (~150KB+ savings)
const AgendaCalendar = dynamic(
() => import('./agenda-calendar').then((mod) => mod.AgendaCalendar),
{
ssr: false,
loading: () => (
<div className="h-full bg-slate-50 rounded-lg flex items-center justify-center">
<div className="flex flex-col items-center gap-3">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-teal-600" />
<span className="text-sm text-slate-500">Agenda laden...</span>
</div>
</div>
),
}
);
import { AgendaToolbar } from './agenda-toolbar';
import { AppointmentModal } from './appointment-modal';
import { RescheduleDialog } from './reschedule-dialog';