Gå til hovedinnhold
KOMPONENTER

Skeleton

npmv0.5.2

Skeletons er placeholdere som visuelt kommuniserer at deler av innholdet er i ferd med å laste inn og hvordan innholdsoppsettet vil se ut.

npm install @entur/loader
@import '@entur/loader/dist/styles.css';

Komponenter

Skeleton

import { SkeletonRectangle } from '@entur/loader';
NavnTypeDefault-verdiBeskrivelse
className?string

Ekstra klassenavn

width?string | number '100%'

Bredden til komponenten. Er 100% som default.

height?string | number '1rem'

Høyden til komponenten. 1rem som default.

Skeleton er en firkantig boks, som man gir en høyde og bredde til. Elementene har litt marigin seg i mellom per default.

SkeletonCircle

import { SkeletonCircle } from '@entur/loader';
NavnTypeDefault-verdiBeskrivelse
className?string

Ekstra klassenavn

sizestring | number'1rem'

Høyde og bredde av sirkelen. 1rem som default

SkeletonCircle er en sirkulær "Skeleton", for å illustrere sirkulære komponenter som vil vises etter lastingen er gjennomført.

SkeletonWrapper

import { SkeletonWrapper } from '@entur/loader';
NavnTypeBeskrivelse
loadingAriaLabel?string

Meldig som leses opp for skjemleser

className?string

Ekstra klassenavn

children?ReactNode

Skeletonkomponentene som skal vises

Det ytterste elementet som Skeleton og SkeletonCircle pakkes inn i. Brukes for å gi nødvendige aria-labels o.l.

Retningslinjer for bruk

Skeletons er placeholdere som visuelt kommuniserer at deler av innholdet er i ferd med å laste inn og hvordan innholdsoppsettet vil se ut. Brukes når seksjoner på siden gradvis fylles med innhold, for eksempel tekst og bilder eller data i tabeller som dukker opp etter hvert som de blir tilgjengelige. På denne måten gir vi brukerne en idé og forventning om hva slags innhold som skal komme, i tillegg for å skape en oppfatning av redusert ventetid. Skeletons blir borte og erstattes med innhold så snart dataene er tilgjengelig.

Prinsipper

Innafor
  • Bruk skeletons hvis data hentes fra baksystemer som har lang ventetid og er ikke umiddelbart tilgjengelige.
  • Bruk skeletons hvis det laster inn mer enn ett element samtidig som krever en indikator.
  • Bruk skeletons når innholdet har en fast størrelse og oppsettet er forutsigbart.
Uttafor
  • Unngå å bruk skeletons hvis det er en langvarig prosess, f.eks importering av data eller opplasting av en fil. Bruk Progressbar i stedet.
  • Unngå skeletons hvis det er en rask prosess som tar mindre enn 300 ms. Vurderer å bruk en vanlig Loader eller om du i det hele tatt trenger en lastetilstand.
  • For en liten, inline handling som f.eks klikket på en knapp der handlingen kan ta tid, bruker vi en lastespinner i knappen istedet.
Rediger denne siden på Bitbucket