Om du har använt en webb- eller mobilapp har du förmodligen sett en skelettskärm. Den här UI-enheten ger en smidigare upplevelse när en uppdatering är beroende av att data tas emot, vilket kan ta ett tag att komma fram.

Ta reda på exakt vad en skelettskärm är, varför du kanske vill använda dem i din app och hur du implementerar dem i Next.js.

Vad är en skelettskärm?

En skelettskärm är ett UI-element som indikerar att något laddas. Det är vanligtvis ett tomt eller "tomt" tillstånd för en UI-komponent, utan några data. Om du till exempel skulle ladda en lista med objekt från en databas, kan skelettskärmen vara en enkel lista utan data, bara platshållarboxelement.

Många webbplatser och appar använder skelettskärmar. Vissa använder dem för ett laddningstillstånd, medan andra använder dem som ett sätt att förbättra upplevd prestanda.

Varför använda en skelettskärm?

Det finns några anledningar till varför du kanske vill använda en skelettskärm i din Next.js-app.

För det första kan det förbättra den upplevda prestandan för din app. Om användare ser en tom skärm medan data laddas, kan de anta att appen är långsam eller inte fungerar korrekt. Men om de ser en skelettskärm vet de att data laddas och appen fungerar som förväntat.

instagram viewer

För det andra kan skelettskärmar hjälpa till att minska "skräp" eller hack i ditt användargränssnitt. Om data laddas asynkront kan användargränssnittet uppdateras stegvis när din app tar emot data. Detta kan ge en smidigare användarupplevelse.

För det tredje kan skelettskärmar ge en bättre användarupplevelse om data laddas från en långsam eller opålitlig anslutning. Om data hämtas från en fjärrserver finns det en chans att anslutningen kan vara långsam eller avbruten. I dessa fall kan det vara bra att visa en skelettskärm så att användarna vet att data laddas, även om det tar ett tag.

Hur man implementerar en skelettskärm i Next.js

Det finns några sätt att implementera skelettskärmar i Next.js. Du kan använda inbyggda funktioner för att manuellt återskapa en enkel skelettskärm. Eller så kan du använda ett bibliotek som reagera-laddar-skelett eller Material UI för att göra jobbet åt dig.

Metod 1: Använda de inbyggda funktionerna

I Next.js kan du använda olika React-krokar och enkla förutsättningar för att visa skelettskärmar. Du kan använda && prop för att villkorligt återge skelettskärmar.

importera {useState, useEffect} från 'reagera';
fungeraMyComponent() {
konst [isLoading, setIsLoading] = useState(Sann);


useEffect(() => {
 setTimeout(() => setIsLoading(falsk), 1000);
 }, []);


lämna tillbaka (
<div>
 {laddar && (
<div>
 Läser in...
</div>
 )}
 {!laddar && (
<div>
 Mitt komponentinnehåll.
</div>
 )}
</div>
 );
}
exporterastandard MyComponent;

Ovanstående kod använder useState krok för att spåra om data laddas (laddar). Den använder useEffect krok för att simulera dataladdning asynkront. Slutligen använder den && operatör för att villkorligt återge skelettskärmen eller komponentinnehållet.

Denna metod är inte idealisk, eftersom den kräver manuell inställning av laddar tillstånd och simulering av dataladdning. Det är dock ett enkelt sätt att implementera en skelettskärm i Next.js.

Metod 2: Använda ett bibliotek som "React-Loading-Skeleton"

Ett annat sätt att implementera skelettskärmar är att använda ett bibliotek som reagera-laddar-skelett. react-loading-skeleton är en React-komponent som du kan använda för att skapa skelettskärmar. Den har en komponent som du kan linda runt alla UI-element.

För att använda react-loading-skeleton måste du installera det med npm.

npm jag reagerar-laddar-skelett

När den är installerad kan du importera den till din Next.js-app och använda den så här:

importera Reagera från 'reagera';
importera Skelett från 'reagera-laddning-skelett';
importera 'react-loading-skeleton/dist/skeleton.css'
konst App = () => {
lämna tillbaka (
<div>
<Skelett />
<h3>Andra skärmen</h3>
<Skeletthöjd={40} />
</div>
 );
};
exporterastandard App;

Ovanstående kod importerar Skelett komponent från react-loading-skeleton-biblioteket. Den använder den sedan för att skapa två skelettskärmar. Den använder höjd prop för att ställa in höjden på skelettskärmen. Nu kan du använda villkorlig rendering att endast återge komponenten när data finns närvarande.

Metod 3: Använda Material UI

Om du använder Material UI i din Next.js-app kan du använda komponent från @mui/material bibliotek. De komponenten från Material UI har några rekvisita som du kan använda för att anpassa skelettskärmen.

Att använda komponent från Material UI, måste du först installera den med npm:

npm installera @mui/material

När den är installerad kan du importera den till din Next.js-app och använda den så här:

importera Reagera från 'reagera';
importera Skelett från '@mui/material/Skeleton';
konst App = () => {
lämna tillbaka (
<div>
<Skelettvariant="rect" bredd={210} höjd={118} />
<h3>Andra skärmen</h3>
<Skelettvariant="text" />
</div>
 );
};
exporterastandard App;

Ovanstående kod importerar Skelett komponent från @material-ui/lab bibliotek. Det skapar sedan två skelettskärmar. De variant prop ställer in typen av skelettskärm. De bredd och höjd rekvisita definierar måtten på skelettskärmen.

Du kan också lägga till olika animationer till dina skelettskärmar. Material UI har några inbyggda animationer som du kan använda. Du kan till exempel använda animera prop för att lägga till en blekande animation till dina skelettskärmar:

importera Reagera från 'reagera';
importera Skelett från '@mui/material/Skeleton';
konst App = () => {
lämna tillbaka (
<div>
<Skelettvariant="rect" bredd={210} höjd={118} />
<h3>Andra skärmen</h3>
<Skelettvariant="text" animera="Vinka" />
</div>
 );
};
exporterastandard App;

Genom att lägga till animera stötta till en komponent, kan du införliva visuell rörelse i ditt användargränssnitt. De Vinka värde lägger till en vinkande animation till skelettskärmen. Du kan nu använda villkorlig rendering för att visa innehållet efter skelettskärmen.

Förbättra användarupplevelsen med Skeleton Screens

Skelettskärmar kan vara ett bra sätt att förbättra användarupplevelsen av din Next.js-app. De kan öka upplevd hastighet, minska skräp och erbjuda en bättre upplevelse när data färdas över en långsam eller instabil anslutning.

Oavsett vilken metod du väljer för att lägga till skelettskärmar är de ett bra sätt att förbättra användarupplevelsen av din Next.js-app.