Loaders
Designprincipes
- Skeletons boven spinners. Voor elk gebied dat content gaat laden tonen we een grijze placeholder in de vorm van die content. Spinners alleen binnen knoppen die een actie uitvoeren (versturen, opslaan, omzetten).
- Skeleton verschijnt pas na 400ms. Onder 400ms tonen we niets — vorige content blijft staan. Voorkomt onnodige flits bij snelle responses.
- Skeleton blijft minimaal 500ms zichtbaar. Eenmaal verschenen mag hij niet binnen 500ms weer verdwijnen. Voorkomt geflikker.
1 · Skeleton primitives
De bouwstenen. Combineer naar de vorm van de content die laadt — nooit losse blokken in een echte UI.
.skeleton--text · 60%
.skeleton--text · 80%
.skeleton--text · 100%
.skeleton--title
.skeleton--avatar
.skeleton--thumb
.skeleton--pill
.skeleton--block
// shared/hooks.jsx
function useDelayedLoading(isLoading, delay = 400, minDuration = 500) {
// 1. wacht 'delay' ms voordat we de skeleton tonen
// 2. zodra getoond, blijf minimaal 'minDuration' ms zichtbaar
// → geen flits bij snelle responses, geen geflikker bij langzame
}
// gebruik
const showSkeleton = useDelayedLoading(isLoading);
return showSkeleton ? <ListSkeleton /> : <List items={data} />;2 · Skeleton composities
Drie scenario's die in modules voorkomen: lijst, paper (drawer + detail), en losse KPI-card.
3 · Inline spinners
Spinners zitten in de knop die de actie uitvoert. Niet in laad-gebieden — daar horen skeletons.
4 · Progress-strook
Voor langere acties: omzetten naar order, bulk-acties, document genereren. Dunne strook bovenaan de drawer of pagina.
Indeterminate
Determinate · 34%
Done · 100% (fade-out na 400ms)