Hoppa till huvudinnehåll

Laddningsindikatorer

Laddningsindikatorer är visuella platshållare för komponenter eller information som visas medan de laddar. Detta mönster beskriver hur och när vi använder olika laddningsindikatorer.

Använd laddningsindikatorer för operationer som förväntas ta mer än en sekund, för att udvika ett flimrande gränssnitt

Skeleton​

Skeleton används när vi vet hur layouten eller komponenten kommer att se ut när det har laddat klart. Det ger användaren en bra bild av hur gränssnittet kommer se ut när det har laddat klart och är den rekommenderade laddningsindikatorn när en komponent, en del av gränssnittet eller hela gränssnittet laddas första gången.

  • Anpassa storleken/ formen på Skeleton för att efterlikna de komponenter som kommer finnas i gränssnittet
  • Vi använder inte Skeleton om vi inte vet hur innehållet ska se ut när det laddat klart. Då använder vi helskärmsspinner.

Helskärmsspinner​

Används när hela sidan eller appen är otillgänglig tills det har laddat klart.

  • Visa Spinner centrerat på skärmen och tona ner bakgrunden.
  • Vi använder inte helskärmsspinner om vi vet hur gränssnittet kommer att se ut när det laddat klart. Då använder vi Skeleton.
  • Använd inte helskärmsspinner om endast en del av sidan laddas. Använd Spinner eller Skeleton på komponenten/delen istället

Spinner i Button​

Används när användaren via knappen triggar en process som kräver att systemet laddar en kortare tid, tex när ett formulär skickas in.

  • Använd prop isPending på Button. Du kan läsa mer om det och se ett exempel hos React Aria
  • Visa small Spinner i knappen, till vänster om etiketten.
  • Ändra texten i knappen till presensformen av verbet (skicka -> skickar) under tiden som det laddar
  • Meddela användaren när systemet laddat klart, tex med en toast
Både för och efternamn

Spinner bredvid ett fält​

Används när det är ett fält som laddar, tex vid kontroll mot databas direkt när användaren lämnar fältet. Optimalt ska detta inte ta så lång tid att användaren behöver vänta, men i de fall där anropen tar lång tid kan en spinner läggas bredvid fältet som laddar. I nedan exempel syns en spinner så fort du lämnar fältet.

  • Visa en small Spinner bredvid fältet under tiden som det laddar
  • Använd inte spinner bredvid fält när kontrollen/valideringen sker vid submit. Då använder vi helskärmsspinner.