En snygg och enkel skeleton-loader för React


I det här inlägget så kommer vi lära oss hur man bygger en så kallad skeleton loader i React. En användbar komponent som hjälper användare att förstå vad som händer på din sida på ett intuitivt sätt. Vi kommer börja med lite bakgrund, men om du vill gå direkt till koden så klicka här.

Bakgrund

Man använder ofta olika typer av laddikoner för att signalera för en användare att en sida eller vy håller på att laddas in. Traditionella exempel är en spinner, prickar som blinkar eller en bar som sakta fylls i. En nackdel med denna approach är att du som användare får vänta med att se layouten på sidan samt att många felaktigt uppfattar sidan som långsammare på grund av det här beteendet.

Exempel på vanliga laddikoner

För att åtgärda detta så använder utvecklare sig ofta av så kallade skeleton loaders istället för att på så sätt rita upp layouten innan innehåll har kunnat laddas in, vilket drastiskt sänker tiden tills “första meningsfulla uppritning”. Med meningsfull upritning så menas här någon form av layout av sidan. Att korta ned tiden tills första meningsfulla uppritning är något som vi utvecklare ständigt brottas med för att ge våra användare något användbart att se på.

Därför är skeleton loaders en väldigt användbar resurs då du inte behöver vänta på ett API eller annan tjänst för att kunna rita upp layouten av din sida. Tid till uppritning är lika lång som det tar att hämta själva layouten, sen när datan som du vill hämta är inladdad så visar du bara samma layout fast med datan ifylld. Ett bra exempel på implementation av denna design är Youtubes första sida.

Googles skeleton loader

Här kan du se hur användaren innan datan har levererats kan se hur layouten ser ut och på så vis bättre förstå hur de ska interagera med din sida - redan innan data ens har hämtats in! En annan fördel är att den här typen av rendering uppfattas som snabbare av användare. Se exempelvis denna studie för mer information. Men nog om det, vi ska ju skriva kod.

Egen kod

Vi kommer bygga en funktionell React-komponent som kommer kunna style:as precis hur vi vill. Så vi börjar med att definiera signaturen.

import React from 'react';

export default function SkeletonLoader({
    style, // Används för att sätta unika stil
    className, // Används för att sätta ett eller flera klassnamn
}) {
    // Sätt default css klass
    if (!className || className === '') {
        className = 'skeleton-loader';
    } else {
        className = `skeleton-loader ${className}`;
    }

    return <div style={style} className={className} />
}

Det där är då hela komponenten, och självklart kan den utökas som man själv vill. Men för att endast få till en loader så behövs inte mer än några rader CSS till så kommer det att funka utmärkt. Så nu till CSS:en.

@keyframes skeleton-fade {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

.skeleton-loader {
    animation: skeleton-fade 2s ease-in-out infinite;
    background-color: #f4f4f4;
    background-image: linear-gradient(90deg, #f4f4f4, #e5e5e5, #f4f4f4);
    background-size: 200px 100%;
    background-repeat: no-repeat;
}

That’s it! Easy peasy, det enda som är kvar nu är att i rooten av din app importera din CSS och sen använda din komponent genom importa SkeletonLoader och styla den efter eget bevåg. Vill du leka runt lite mer själv med den här komponenten eller källkoden så kan ni gå in på dess Github repo eller gå in på codesandbox.