Skeletons er placeholdere som visuelt kommuniserer at deler av innholdet er i ferd med å laste inn og hvordan innholdsoppsettet vil se ut.
Kontrast
Komponenter
Skeleton
Navn
Type
Default-verdi
Beskrivelse
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
Navn
Type
Default-verdi
Beskrivelse
className?
string
Ekstra klassenavn
size
string | 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
Navn
Type
Beskrivelse
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.
