Loader

ReactSass

En lasteindikator viser brukeren at systemet jobber. Vi bruker lasteindikatoren når vi har handlinger eller prosesser som tar lengre tid enn ett sekund. For større seksjoner anbefaler vi skeleton loaders, heller enn én stor lasteindikator.

<Loader
    variant="large"
    textDescription="Eksempelbeskrivelse for en loader"
/>

Plasser lasteindikatoren sammen med handlingen som utløser den. Den kan ha ulik posisjon og størrelse, avhengig av konteksten den skal fungere i. Lasteindikatoren tar farge etter teksten rundt.

Dersom handlingen vanligvis tar under et halvt sekund, men kan ta lenger tid enn ett sekund, er det lurt å vente med å vise loaderen til vi ser at den trengs tilbakemelding til brukeren.

Skeleton loader

En skeleton loader er egentlig en samling med omriss som likner noenlunde på hva som vil vises når lastingen er ferdig. Her trenger det ikke være pixelperfekt. Poenget er at man skal få en bedre brukeropplevelse når siden etter hvert bytter ut lasteindikatoren med innholdet.

<SkeletonAnimation
    role="none presentation" // Kun for eksempelet, ellers blir det mange alerts på siden
    forceCompact={false}
>
    <div style={{ display: "flex", flexDirection: "column", gap: 40 }}>
        <SkeletonElement width={350} height={32} />
        <SkeletonInput forceCompact={false /}>
        <SkeletonTextArea forceCompact={false /}>
        <SkeletonCheckboxGroup checkboxes={3} forceCompact={false /}>
        <SkeletonRadioButtonGroup radioButtons={3} forceCompact={false /}>
        <SkeletonButton width={225} forceCompact={false /}>
        <SkeletonTable forceCompact={false}>
            <SkeletonTableHeader>
                <div style={{ width: 215 }}>
                    <SkeletonElement width={115} height={16} />
                </div>
                <div style={{ width: 115 }}>
                    <SkeletonElement width={115} height={16} />
                </div>
            </SkeletonTableHeader>
            {Array.from(Array(5)).map((_, index) => (
                <SkeletonTableRow key={index}>
                    <div style={{ width: 215 }}>
                        <SkeletonElement width={index % 2 ? 115 : 185} height={19} />
                    </div>
                    <div style={{ width: 115 }}>
                        <SkeletonElement width={24} height={24} shape="circle" />
                    </div>
                </SkeletonTableRow>
            ))}
        </SkeletonTable>
    </div>
</SkeletonAnimation>

For at animasjonen skal fungere best mulig er det to CSS-variabler det er greit å ha et forhold til:

1. --jkl-skeleton-sweeper-color
2. --jkl-skeleton-sweep-duration

Animasjonens effekt blir penest om --jkl-skeleton-sweeper-color er lik bakgrunnsfargen til innholdet. Som standard er den satt til snøhvit i lyst tema og granitt i mørkt tema, det vil si likt standard bakgrunnsfarge. Om du skal ha en skeleton loader på en annen bakgrunnsfarge bør du sette --jkl-skeleton-sweeper-color lik den bakgrunnsfargen med CSS i ditt eget prosjekt.

Hurtigheten på animasjonen avhenger av bredden på innholdet. Derfor kan det være lurt å justere standardverdien med --jkl-skeleton-sweep-duration.

Hvor bruker vi loaders?

• I knapper som brukeren har klikket på
• På et kort eller i felt der noe blir beregnet før innholdet vises.

Hvor bruker vi skeleton loaders?

• For å vise omriss av tabeller vi er i ferd med å laste inn
• Som overgang mellom sider hvor vi ikke har noe innhold å vise uten å vente