Skeleton

Käytä Skeleton-komponenttia latausindikaattorina, joka tarjoaa käyttäjälle visuaalisen vihjeen ladattavasta sisällöstä. Korvaa Skeleton oikealla sisällöllä heti, kun tarvittava sisältö on valmis esitettäväksi.

Julkaistu versiossa 0.15.3

Esikatselu

Käyttötarkoitus

Skeleton-komponentit ovat väliaikaisia paikkaajia sisällölle, joka ladataan tai generoidaan dynaamisesti. Sisällön tilalle luodaan skeleton vastaamaan sisällön asettelua. Kun sisältö on valmis latautumaan, Skeleton korvautuu oikealla sisällöllä.

Skeleton-komponentti toimii siten sekä asettelua että latauksen edistymistä kuvaavana visuaalisena vihjeenä.

Tee näin

Kaikkia komponentteja ei tarvitse latausvaiheessa esittää Skeleton-komponentilla. Usein yksinkertaistettu versio näkymästä riittää.
Pyri luomaan Skeleton-komponenteista mahdollisimman saman kokoisia kuin lopullisesta sisällöstä. Hyödynnä apuluokkia.
Käytä komponenttien light-variaatiota Skeleton-latauksessa.

Älä tee näin

Älä käytä korvaamaan staattista sisältöä, joka on heti tai hyvin nopeasti saatavilla.

Toimintaperiaate

Alla kuvitteellinen esimerkki Skeleton-latauksen käytöstä Card-komponentissa.

Tekniseen toteutukseen on eri tapoja:

Kela Design Systemin tarjoamilla komponenteilla luodaan oma käyttöliittymäkomponentti.
- Jos komponentille ei anneta sisältöä, se renderöi Skeletonin.
Container-komponentti hakee dynaamisesti sisältöä ulkoisen rajapinnan yli.
- Kun sisältö on vastaanotettu ja käsitelty, komponentti renderöidään oikealla sisällöllä.

Saavutettavuus

Komponentti ei itsessään takaa latausvaiheen saavutettavuutta. Skeleton-toteutuksen saavutettavuus on siten sovelluksen kehittäjän vastuulla.

Esimerkit

Tekstirivi

Tekstikappale

Kuvake

Skeleton-komponentin koon muokkaus

Skeleton-komponentti käyttää oletuksena parent-elementin. Leveyttä voi muuttaa esimerkiksi apuluokkien ja className-propin avulla.