# Loading-states en skeletons: wachttijd minder pijnlijk maken

## 53% van de mobiele bezoekers verlaat een pagina na meer dan 3 seconden wachten

Dat getal komt van Google Developers en is al jaren het meest geciteerde cijfer in webperformance. Maar er is een nuance die minder aandacht krijgt: hoe je wachttijd presenteert, maakt bijna evenveel uit als de wachttijd zelf. Een interface die er bezig uitziet voelt sneller aan dan een witte lege pagina die plotseling vol content knalt.

Loading-states zijn je eerste verdedigingslinie. Niet omdat ze laadtijd reduceren, maar omdat ze je bezoeker het gevoel geven dat er iets gebeurt.

## Wat is een loading-state en waarom heeft elk component er een nodig?

Een loading-state is een visuele aanwijzing dat content nog onderweg is. Denk aan een pulserende grijze balk op de plek waar straks een productnaam staat, een spinner in een verzendknop na een klik, of een hele paginalay-out gevuld met grijze blokken die de echte content alvast in kaart brengen.

Elk dynamisch element op je website heeft drie toestanden: laden, geladen, en mislukt. De meeste developers denken vooral na over de geladen toestand. De laad- en fouttoestanden worden snel overgeslagen, terwijl je bezoeker die juist het meest ervaart.

Zonder een loading-state ziet je bezoeker een interface die niet reageert op klikken, of een pagina die na seconden stilte ineens vol inhoud springt. Beide geven hetzelfde signaal af: de site werkt niet.

## Skeletons versus spinners: wanneer kies je wat?

Een spinner is een draaiend icoontje. Hij zegt: ik ben bezig, maar ik weet niet hoe lang. Dat is prima voor korte acties met onvoorspelbare duur, zoals een zoekopdracht van een halve seconde of een formulier dat verstuurd wordt.

Een skeleton screen is een lege versie van de content die straks geladen wordt. De lay-out is al zichtbaar, maar gevuld met grijze rechthoeken in de vorm van tekst en afbeeldingen. Gebruik skeletons voor:

- Pagina's of secties die meerdere seconden laden
- Lijsten met items: productoverzichten, zoekresultaten, dashboards
- Feeds waarbij items asynchroon binnenkomen

De reden dat skeletons beter werken voor langere wachttijden is psychologisch. Als de bezoeker al ziet waar de content straks staat, geeft dat een frame om op te wachten. De hersenen registreren voortgang, ook als er technisch niets is veranderd. Luke Wroblewski, die de techniek in 2013 beschreef in zijn artikel over skeleton screens, noemde dit bewust als het voornaamste voordeel boven spinners.

## Hoe je een skeleton bouwt die echt werkt

De basisimplementatie is simpel: vervang tijdelijk de content door lege divs met de juiste afmetingen en een grijze achtergrond. Een pulserende animatie maakt het levend.

```css
.skeleton {
  background: #e2e8f0;
  border-radius: 4px;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
```

Wil je een stap verder gaan, dan gebruik je een shimmer-animatie: een lichtere glinstering die van links naar rechts beweegt. Dat ziet er verzorgder uit en voelt technischer aan. Facebook en LinkedIn gebruiken dit al jaren.

```css
.skeleton-shimmer {
  background: linear-gradient(
    90deg,
    #e2e8f0 25%,
    #f8fafc 50%,
    #e2e8f0 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
```

Geen extra library nodig. Pure CSS, werkt in alle moderne browsers.

Het belangrijkste ontwerpprincipe: maak je skeleton zo specifiek mogelijk. Als je skeleton-blokken qua grootte en positie niet overeenkomen met de echte content, springt de lay-out als de data inlaadt. Dat noemen we cumulative layout shift (CLS), en het is zowel een negatieve gebruikerservaring als een SEO-factor die Google meetelt.

## Optimistische UI: de gevorderde aanpak

Bij klikacties in interactieve interfaces kun je een stap verder gaan: de optimistische update. Je past de interface direct aan alsof de actie al geslaagd is, en handelt de server-aanvraag op de achtergrond af. Als de aanvraag mislukt, draai je de update terug.

Dit is hoe Notion werkt als je een blok versleept, hoe een like direct telt op sociale media, en hoe apps zich aanvoelen als native software. De bezoeker ervaart geen wachttijd, want die is er visueel niet.

De vereiste: goede foutafhandeling en een rollback-mechanisme. Niet geschikt voor destructieve acties zoals verwijderen of betalen. Maar voor lichte interacties - een favoriet opslaan, een item naar een andere categorie slepen - is het de beste gebruikerservaring die je kunt bieden.

Bij Web Design by Kick bouwen we dit standaard in voor klikacties in webapplicaties. Het verschil in gebruikerservaring is direct merkbaar, zelfs op langzame verbindingen.

## Fouttoestanden en de drie meest gemaakte fouten

Een loading-state is pas compleet als je ook een foutstaat hebt ontworpen. Wat ziet je bezoeker als de API-call mislukt? Een lege pagina geeft geen enkel handvat.

Ontwerp altijd een foutstaat met drie elementen: een vriendelijke foutmelding in normaal Nederlands, een mogelijkheid om het opnieuw te proberen, en een alternatief als het echt niet werkt. Een bezoeker die weet wat er misgaat, blijft langer dan een bezoeker die voor een lege interface staat.

De drie fouten die je skeleton tot niks maken:

**Skeleton met verkeerde afmetingen.** Als je skeleton een card van 120px hoog toont, maar de echte content 240px is, springt de pagina bij het laden. Dit is precies de layout shift die je wilt vermijden.

**Skeleton te lang tonen.** Als de data al geladen is maar de skeleton nog honderd milliseconden doorloopt, irriteert dat. Wissel direct over zodra de data beschikbaar is.

**Spinners voor alles.** Een spinner in een pagina die vier seconden laadt geeft geen houvast. Gebruik skeletons zodra je wachttijd langer is dan anderhalve seconde.

## Conclusie

Loading-states en skeletons zijn geen decoratie. Ze bepalen mede of je bezoeker besluit dat je site werkt of kapot is. Een goed gebouwde skeleton kost een uur extra werk, maar verlaagt de kans dat bezoekers afhaken tijdens het laden.

---

## Bronnen

- [Google Developers - Why Performance Matters](https://web.dev/articles/why-speed-matters)
- [Luke Wroblewski - Skeleton Screens](https://www.lukew.com/ff/entry.asp?1797)
- [Nielsen Norman Group - Progress Indicators Make Users Feel Faster](https://www.nngroup.com/articles/progress-indicators/)
- [web.dev - Cumulative Layout Shift (CLS)](https://web.dev/articles/cls)
- [Baymard Institute - Perceived Performance in E-commerce](https://baymard.com/blog/perceived-performance)

---

Bron: https://webdesign.bykick.nl/blog/loading-states-en-skeletons-wachttijd-minder-pijnlijk-maken