Kui olete kasutanud veebi- või mobiilirakendust, olete tõenäoliselt näinud luukere ekraani. See kasutajaliidese seade pakub sujuvamat kasutuskogemust, kui värskendus sõltub andmete vastuvõtmisest, mille saabumine võib veidi aega võtta.

Uurige täpselt, mis on skeletiekraan, miks võiksite neid oma rakenduses kasutada ja kuidas neid rakenduses Next.js rakendada.

Mis on skeleti ekraan?

Skeletiekraan on kasutajaliidese element, mis näitab, et midagi laaditakse. Tavaliselt on see kasutajaliidese komponendi tühi või "tühi" olek ilma andmeteta. Näiteks kui laadiksite andmebaasist üksuste loendi, võib luustikukuva olla lihtne loend, millel pole andmeid, vaid ainult kohatäitekasti elemendid.

Paljud veebisaidid ja rakendused kasutavad luukere ekraane. Mõned kasutavad neid laadimisoleku jaoks, samas kui teised kasutavad neid tajutava jõudluse parandamiseks.

Miks kasutada skeletiekraani?

On mõned põhjused, miks võiksite oma rakenduses Next.js kasutada skeletiekraani.

Esiteks võib see parandada teie rakenduse tajutavat toimivust. Kui kasutajad näevad andmete laadimise ajal tühja ekraani, võivad nad eeldada, et rakendus on aeglane või ei tööta korralikult. Kui nad aga näevad luukere, teavad nad, et andmeid laaditakse ja rakendus töötab ootuspäraselt.

Teiseks võivad luukereekraanid aidata vähendada kasutajaliidese segadust või segadust. Kui andmeid laaditakse asünkroonselt, saab kasutajaliidest järk-järgult värskendada, kui teie rakendus andmeid saab. See võib muuta kasutajakogemuse sujuvamaks.

Kolmandaks võivad skeletiekraanid pakkuda paremat kasutuskogemust, kui andmeid laaditakse aeglase või ebausaldusväärse ühenduse kaudu. Kui andmeid tuuakse kaugserverist, võib ühendus olla aeglane või katkenud. Sellistel juhtudel võib olla kasulik kuvada luuke, et kasutajad teaksid, et andmeid laaditakse, isegi kui see võtab veidi aega.

Skeletiekraani rakendamine rakenduses Next.js

Skeletiekraanide rakendamiseks Next.js-is on mitu võimalust. Sisseehitatud funktsioonide abil saate käsitsi luua lihtsa skeletiekraani. Või võite kasutada raamatukogu nagu reageerida-laadimine-skelett või materjali kasutajaliides, et teie eest töö ära teha.

1. meetod: sisseehitatud funktsioonide kasutamine

Programmis Next.js saate kasutada erinevad Reacti konksud ja lihtsad tingimused skeletiekraanide kuvamiseks. Võite kasutada && tugi, et tinglikult renderdada skeletiekraane.

importida {useState, useEffect} alates 'reageerida';
funktsiooniMinu komponent() {
konst [isLoading, setIsLoading] = useState(tõsi);


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


tagasi (
<div>
 {isLoading && (
<div>
 Laadimine...
</div>
 )}
 {!Laaditakse && (
<div>
 Minu komponendi sisu.
</div>
 )}
</div>
 );
}
eksportidavaikimisi MyComponent;

Ülaltoodud kood kasutab useState konks andmete laadimise jälgimiseks (on laadimine). See kasutab useEffect konks andmete asünkroonse laadimise simuleerimiseks. Lõpuks kasutab see && operaator, et tinglikult renderdada luukere või komponendi sisu.

See meetod ei ole ideaalne, kuna see nõuab käsitsi seadistamist on laadimine olek ja andmete laadimise simuleerimine. See on aga lihtne viis skeletiekraani rakendamiseks rakenduses Next.js.

2. meetod: teegi kasutamine nagu „Reageerimis-laadimisskelett”

Teine viis skeletiekraanide rakendamiseks on kasutada teegi sarnast reageerida-laadimine-skelett. react-loading-skeleton on Reacti komponent, mida saate kasutada skeletiekraanide loomiseks. Sellel on komponent, mille saate ümbritseda mis tahes kasutajaliidese elemendiga.

React-loading-skeletoni kasutamiseks peate selle installima kasutades npm.

npm i reageerin-laadimine-skelett

Kui see on installitud, saate selle importida oma Next.js rakendusse ja kasutada seda järgmiselt.

importida Reageerige alates 'reageerida';
importida Skelett alates 'reageerida-laadimine-skelett';
importida 'react-loading-skeleton/dist/skeleton.css'
konst Rakendus = () => {
tagasi (
<div>
<Skelett />
<h3>Teine ekraan</h3>
<Skeleti kõrgus = {40} />
</div>
 );
};
eksportidavaikimisi Rakendus;

Ülaltoodud kood impordib Skelett komponent reageerimise laadimise skeleti teegist. Seejärel kasutab see seda kahe skeletiekraani loomiseks. See kasutab kõrgus tugi, et määrata skeleti ekraani kõrgus. Nüüd sa saad kasutada tingimuslikku renderdamist komponendi renderdamiseks ainult siis, kui andmed on olemas.

3. meetod: materjali kasutajaliidese kasutamine

Kui kasutate rakenduses Next.js materjali kasutajaliidest, saate kasutada komponent pärit @mui/materjal raamatukogu. The Materjali kasutajaliidese komponendil on mõned rekvisiidid, mida saate skeletiekraani kohandamiseks kasutada.

Et kasutada Materjali kasutajaliidese komponent, peate selle esmalt installima npm abil:

npm installimine @mui/material

Kui see on installitud, saate selle importida oma Next.js rakendusse ja kasutada seda järgmiselt.

importida Reageerige alates 'reageerida';
importida Skelett alates '@mui/materjal/skelett';
konst Rakendus = () => {
tagasi (
<div>
<Skeleti variant ="rekt" laius={210} kõrgus={118} />
<h3>Teine ekraan</h3>
<Skeleti variant ="tekst" />
</div>
 );
};
eksportidavaikimisi Rakendus;

Ülaltoodud kood impordib Skelett komponent pärit @materjal-ui/lab raamatukogu. Seejärel loob see kaks luukereekraani. The variant prop määrab skeleti ekraani tüübi. The laius ja kõrgus rekvisiidid määravad skeleti ekraani mõõtmed.

Samuti saate oma skeletiekraanidele lisada erinevaid animatsioone. Materjali kasutajaliideses on mõned sisseehitatud animatsioonid, mida saate kasutada. Näiteks võite kasutada animeerima rekvisiit, et lisada oma luukereekraanidele tuhmuv animatsioon:

importida Reageerige alates 'reageerida';
importida Skelett alates '@mui/materjal/skelett';
konst Rakendus = () => {
tagasi (
<div>
<Skeleti variant ="rekt" laius={210} kõrgus={118} />
<h3>Teine ekraan</h3>
<Skeleti variant ="tekst" animeerima ="Laine" />
</div>
 );
};
eksportidavaikimisi Rakendus;

Lisades animeerima prop to a komponent, saate oma kasutajaliidesesse lisada visuaalse liikumise. The Laine väärtus lisab luukereekraanile lainetava animatsiooni. Nüüd saate kasutada tingimuslikku renderdamist, et kuvada sisu pärast skeletiekraani.

Parandage skeletiekraanidega kasutajakogemust

Skeletiekraanid võivad olla suurepärane viis rakenduse Next.js kasutuskogemuse parandamiseks. Need võivad suurendada tajutavat kiirust, vähendada tüsistusi ja pakkuda paremat kogemust, kui andmed liiguvad aeglase või ebastabiilse ühenduse kaudu.

Ükskõik, millise meetodi skeletiekraanide lisamiseks valite, on need suurepärane viis rakenduse Next.js kasutuskogemuse parandamiseks.