Designsystemoversikt

Skeleton loader

Skeleton loader holder plassen varm mens kjent struktur venter på reelt innhold.

Jøkul · Komponenter

Pakke: @fremtind/jokul

Installasjon: Se relevant guide

Skeleton loader er Jøkul sitt mønster for ventetilstander der layouten allerede er kjent. I stedet for en generell spinner får brukeren en plassholder som speiler den endelige strukturen.

Den lokale forhåndsvisningen bruker Jøkul sine faktiske klasser fra monopakka `@fremtind/jokul` og den ekte `skeleton-loader.min.css`-fila.

Playgrounden under styrer hele den dokumenterte markupkontrakten for element-, input- og table-variantene.

Eksempel

Props

    • pattern="element" · compact=false · shape="rectangle"

    Brukes når du kjenner til ett konkret element eller en avatar.

    Kode

    HTML · html
    <div class="jkl-skeleton-animation" aria-hidden="true">
    <div class="jkl-skeleton-element" style="inline-size: 14rem; block-size: 1rem;"></div>
</div>
    CSS-importer · ts
    import "@fremtind/jokul/styles/core/core.css";
import "@fremtind/jokul/styles/components/loader/skeleton-loader.min.css";

    Props

    Jøkul-props

    Playground-kontroller og sentrale primitive props som styrer struktur og form i den lokale skjelettvisningen.

    Prop Type Standard Beskrivelse
    pattern "element" | "input" | "table" "element" Velger hvilken ferdig skeleton-struktur du vil bruke i markupen.
    compact boolean false Legg til compact-modifieren når skeletonen må samsvare med en kompakt layout eller tabell.
    shape "rectangle" | "circle" "rectangle" Styrer form på `jkl-skeleton-element` når du bruker den enkleste element-varianten.

    React-props

    Eksplisitte props på de eksporterte skeleton-primitivene i `@fremtind/jokul/loader`.

    Prop Type Standard Beskrivelse
    className string ingen Ekstra klasse på skeleton-wrapperen eller den aktuelle primitive varianten når du må koble den til lokal layout eller sporing.
    children ReactNode påkrevd for animasjons- og tabellvarianter Innholdet som pakkes inn i `SkeletonAnimation`, `SkeletonTableHeader` og `SkeletonTableRow` for å bygge den endelige plassholderstrukturen.
    textDescription string "Vennligst vent" Skjult statusbeskrivelse for `SkeletonAnimation` når ventetilstanden må forklares tekstlig for skjermlesere.
    delay number 0 Forsinker rendringen av skeletonen når du vil unngå flimring ved svært korte ventetider.
    style CSSProperties ingen inline-stiler Brukes når den enkelte primitive skeleton-varianten trenger eksplisitt bredde eller høyde via inline-stiler.
    width number | string påkrevd for element- og tabellvarianter Styrer bredden på `SkeletonElement`, `SkeletonButton` og `SkeletonTable` når plassholderen må speile det endelige innholdet.
    height number | string påkrevd for `SkeletonElement` Styrer høyden på `SkeletonElement` når du vil etterligne en konkret blokk eller avatar.
    labelProps SkeletonLabelProps ingen Lar sammensatte skeleton-varianter styre label-plassholderen separat fra inputdelen.
    inputProps SkeletonElementProps ingen Tilpasser formen og størrelsen på inputdelen i skjelettvarianter for feltgrupper.
    checkboxes number påkrevd for `SkeletonCheckboxGroup` Antall checkbox-rader som skal vises i en skjelettgruppe.
    radioButtons number påkrevd for `SkeletonRadioButtonGroup` Antall radio button-rader som skal vises i en skjelettgruppe.

    Native HTML-props

    Tilgjengelighets- og rolleattributter som kan knyttes til animasjonswrapperen.

    Prop Type Standard Beskrivelse
    role AriaRole ingen Kan brukes på `SkeletonAnimation` når ventetilstanden skal bo i en eksplisitt live region.

    Komposisjoner

    1. Element

      Minste gyldige komposisjon. Bruk denne når du kjenner formen på ett enkelt element, som en avatar eller en kort tekstlinje.

      Påkrevde deler: Animation wrapper , Element placeholder

      pattern="element" · compact=false · shape="circle"

      Brukes når du kjenner til ett konkret element eller en avatar.

      Kode

      HTML · html
      <div class="jkl-skeleton-animation" aria-hidden="true">
    <div class="jkl-skeleton-element jkl-skeleton-element--circle" style="inline-size: 3rem; block-size: 3rem;"></div>
</div>
      CSS-importer · ts
      import "@fremtind/jokul/styles/core/core.css";
import "@fremtind/jokul/styles/components/loader/skeleton-loader.min.css";

    2. Input

      Ferdig komposisjon for skjemaområder der du vil beholde rytmen mellom label, felt og tilvalg mens innholdet lastes.

      Påkrevde deler: Input container , Animation wrapper , Element placeholder , Checkbox row

      pattern="input" · compact=false · shape="rectangle"

      Passer når et skjema eller en feltgruppe er på vei inn.

      Kode

      HTML · html
      <div class="jkl-skeleton-input" aria-hidden="true">
    <div class="jkl-skeleton-animation">
        <div class="jkl-skeleton-element" style="inline-size: 6rem; block-size: 0.75rem;"></div>
    </div>
    <div class="jkl-skeleton-animation">
        <div class="jkl-skeleton-element" style="inline-size: 18rem; block-size: 2.75rem;"></div>
    </div>
    <div class="jkl-skeleton-input__checkbox">
        <div class="jkl-skeleton-animation">
            <div class="jkl-skeleton-element" style="inline-size: 1.5rem; block-size: 1.5rem;"></div>
        </div>
        <div class="jkl-skeleton-animation">
            <div class="jkl-skeleton-element" style="inline-size: 10rem; block-size: 1rem;"></div>
        </div>
    </div>
</div>
      CSS-importer · ts
      import "@fremtind/jokul/styles/core/core.css";
import "@fremtind/jokul/styles/components/loader/skeleton-loader.min.css";

    3. Table

      Brukes når tabellstrukturen er kjent og du vil vise kolonner og radrytme før dataene kommer.

      Påkrevde deler: Table container , Table header , Table row , Animation wrapper , Element placeholder

      pattern="table" · compact=true · shape="rectangle"

      Passer når tabellstrukturen er kjent, men radinnholdet ikke er klart ennå.

      Kode

      HTML · html
      <div class="jkl-skeleton-table jkl-skeleton-table--compact" aria-hidden="true">
    <div class="jkl-skeleton-table__header">
        <div class="jkl-skeleton-animation jkl-skeleton-animation--compact">
            <div class="jkl-skeleton-element" style="inline-size: 5rem; block-size: 1rem;"></div>
        </div>
        <div class="jkl-skeleton-animation jkl-skeleton-animation--compact">
            <div class="jkl-skeleton-element" style="inline-size: 7rem; block-size: 1rem;"></div>
        </div>
        <div class="jkl-skeleton-animation jkl-skeleton-animation--compact">
            <div class="jkl-skeleton-element" style="inline-size: 4rem; block-size: 1rem;"></div>
        </div>
    </div>
    <div class="jkl-skeleton-table__row">
        <div class="jkl-skeleton-animation jkl-skeleton-animation--compact">
            <div class="jkl-skeleton-element" style="inline-size: 9rem; block-size: 1rem;"></div>
        </div>
        <div class="jkl-skeleton-animation jkl-skeleton-animation--compact">
            <div class="jkl-skeleton-element" style="inline-size: 6rem; block-size: 1rem;"></div>
        </div>
        <div class="jkl-skeleton-animation jkl-skeleton-animation--compact">
            <div class="jkl-skeleton-element" style="inline-size: 4rem; block-size: 1rem;"></div>
        </div>
    </div>
    <div class="jkl-skeleton-table__row">
        <div class="jkl-skeleton-animation jkl-skeleton-animation--compact">
            <div class="jkl-skeleton-element" style="inline-size: 7rem; block-size: 1rem;"></div>
        </div>
        <div class="jkl-skeleton-animation jkl-skeleton-animation--compact">
            <div class="jkl-skeleton-element" style="inline-size: 8rem; block-size: 1rem;"></div>
        </div>
        <div class="jkl-skeleton-animation jkl-skeleton-animation--compact">
            <div class="jkl-skeleton-element" style="inline-size: 3rem; block-size: 1rem;"></div>
        </div>
    </div>
</div>
      CSS-importer · ts
      import "@fremtind/jokul/styles/core/core.css";
import "@fremtind/jokul/styles/components/loader/skeleton-loader.min.css";

    Anatomi

    Del Selektor Forelder Kreves Gjentas Beskrivelse
    Animation wrapper .jkl-skeleton-animation Ingen Ja Ja Omslutter en enkelt plassholder og tegner sweep-animasjonen over innholdet.
    Element placeholder .jkl-skeleton-element Animation wrapper Ja Ja Selve flaten som representerer det fremtidige innholdet. Kan gjøres rund med circle-modifier.
    Input container .jkl-skeleton-input Ingen Nei Nei Ferdig struktur for feltgrupper med label, input og eventuelle checkbox-rader.
    Checkbox row .jkl-skeleton-input__checkbox Input container Nei Ja Brukes når input-skjelettet også skal vise en tilhørende checkbox-rad.
    Table container .jkl-skeleton-table Ingen Nei Nei Ferdig struktur for tabeller der kolonner og rytme er kjent før dataene kommer.
    Table header .jkl-skeleton-table__header Table container Nei Nei Header-rad for tabellskjelett som viser forventet kolonneoppdeling.
    Table row .jkl-skeleton-table__row Table container Nei Ja Gjentas for hver forventede datarad i tabellskjelettet.

    Når du skal bruke Skeleton loader

    Bruk skeleton loader når plasseringen og formen på innholdet er kjent, men dataene ikke er klare ennå.

    Hvis brukeren heller trenger beskjed om at et system jobber uten at layouten er bestemt, er en vanlig Loader ofte bedre.

    Tilgjengelighet

    Skeleton loader er dekorativ og må ikke være den eneste formidlingen av lastetilstanden.

    Brukeren trenger fortsatt status gjennom kontekst, overskrift, hjelpetekst eller live region dersom oppdateringen er viktig å få med seg.

    Komponentprofil

    Klient-JS
    Ingen
    Hydrering
    Ingen
    Ikoner
    Ingen
    Dekket API-props
    12
    Playground-kontroller
    3
    Delkomponenter
    0
    Anatomideler
    7
    Komposisjoner
    3
    Utfasete props
    0

    Stiler

    • @fremtind/jokul/styles/core/core.css
    • @fremtind/jokul/styles/components/loader/skeleton-loader.min.css

    Ikonkontrakt

    Bruk: Ingen

    Komponenten krever ingen egen ikonkontrakt i grunnoppsettet.

    Propkontrakt

    Dekning: Komplett

    Scope: Pakkens offentlige props, uten generiske DOM-props

    • Skeleton loader · SkeletonAnimationProps · @fremtind/jokul/loader · 5 props
    • Skeleton loader · SkeletonElementProps · @fremtind/jokul/loader · 4 props
    • Skeleton loader · SkeletonButtonProps · @fremtind/jokul/loader · 3 props
    • Skeleton loader · SkeletonCheckboxGroupProps · @fremtind/jokul/loader · 4 props
    • Skeleton loader · SkeletonInputProps · @fremtind/jokul/loader · 3 props
    • Skeleton loader · SkeletonRadioButtonGroupProps · @fremtind/jokul/loader · 4 props
    • Skeleton loader · SkeletonTableProps · @fremtind/jokul/loader · 3 props
    • Skeleton loader · SkeletonTableHeaderProps · @fremtind/jokul/loader · 2 props
    • Skeleton loader · SkeletonTableRowProps · @fremtind/jokul/loader · 2 props
    • Skeleton loader · SkeletonTextAreaProps · @fremtind/jokul/loader · 3 props
    • Dekningen følger offentlige props som kommer fra Jøkul-pakken og dens egne basetyper, men ikke generiske DOM-props fra React.

    Tilgjengelighet

    Tastatur: Ingen egen tastaturmodell; skeleton loader er dekorativ og skal ikke være fokusbar.

    Semantikk som kreves

    • Skeleton-markupen må være dekorativ og skjules med aria-hidden="true".
    • Bruk separat status eller konteksttekst når ventetilstanden er viktig å forstå.
    • Velg en plassholderstruktur som faktisk matcher det ferdige innholdet.

    Automatiserte kontroller

    • Dokssiden inngår i prosjektets route smoke og a11y-kjøring.
    • Forhåndsvisningen rendres server-side uten Astro islands eller klienthydrering.

    Manuelle kontroller

    • Bekreft at skjelettet ligner nok på sluttresultatet til å sette riktige forventninger.
    • Bekreft at plassholderen forsvinner raskt når dataene er klare.

    Ytelse

    • Sweep-animasjonen er CSS-basert og krever ikke klient-JS.
    • Hold antall samtidige plassholdere nede for å begrense visuell støy.

    Relasjoner

    Foreldre

    Mønsterområdet bygges opp på nytt for å koble generelle lastetilstandsmønstre tilbake til konkrete komponentdocsider.

    • Mønster : Her ligger planen for hvordan nye mønstre skal knyttes til blant annet Skeleton loader.

    Søsken

    Nærliggende komponenter som løser samme ventetid på andre måter.

    • Loader : Bruk den vanlige loaderen når du trenger generell status i stedet for en kjent struktur.

    Relatert