Skeletons er placeholdere som visuelt kommuniserer at deler av innholdet er i ferd med å laste inn og hvordan innholdsoppsettet vil se ut.
Skeleton er en firkantet boks, som man gir en høyde og bredde til.
Elementene har litt marigin seg i mellom per default.
SkeletonCircle er en sirkulær "Skeleton", for å illustrere sirkulære komponenter som vil vises etter lastingen er gjennomført.
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 etterhvert 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.
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.
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.
import { SkeletonRectangle } from '@entur/loader';Denne komponenten har ingen props
import { SkeletonCircle } from '@entur/loader';Denne komponenten har ingen props
import { SkeletonWrapper } from '@entur/undefined';Denne komponenten har ingen props