Jei naudojote žiniatinklio ar mobiliąją programą, tikriausiai matėte ekrano skeletą. Šis vartotojo sąsajos įrenginys užtikrina sklandesnę patirtį, kai naujinys priklauso nuo duomenų gavimo, o tai gali užtrukti.

Sužinokite, kas tiksliai yra ekrano skeletas, kodėl galbūt norėsite juos naudoti programoje ir kaip juos įdiegti Next.js.

Kas yra skeleto ekranas?

Ekrano skeletas yra vartotojo sąsajos elementas, rodantis, kad kažkas įkeliama. Paprastai tai yra tuščia arba „tuščia“ vartotojo sąsajos komponento būsena be jokių duomenų. Pavyzdžiui, jei įkeltumėte elementų sąrašą iš duomenų bazės, skeleto ekranas gali būti paprastas sąrašas be jokių duomenų, tik vietos rezervavimo langelio elementai.

Daugelis svetainių ir programų naudoja skeleto ekranus. Kai kurie juos naudoja pakrovimo būsenai, o kiti juos naudoja kaip būdą pagerinti suvokiamą našumą.

Kodėl verta naudoti skeleto ekraną?

Yra keletas priežasčių, kodėl savo Next.js programoje galbūt norėsite naudoti ekrano skeletą.

Pirma, tai gali pagerinti jūsų programos našumą. Jei naudotojai mato tuščią ekraną, kai įkeliami duomenys, jie gali manyti, kad programa yra lėta arba neveikia tinkamai. Tačiau jei jie mato skeleto ekraną, jie žino, kad duomenys įkeliami ir programa veikia taip, kaip tikėtasi.

instagram viewer

Antra, karkasiniai ekranai gali padėti sumažinti vartotojo sąsajos trūkumą arba trūkumą. Jei duomenys įkeliami asinchroniškai, NS gali būti atnaujinama palaipsniui, kai programa gauna duomenis. Tai gali palengvinti vartotojo patirtį.

Trečia, skeleto ekranai gali suteikti geresnę vartotojo patirtį, jei duomenys įkeliami iš lėto arba nepatikimo ryšio. Jei duomenys gaunami iš nuotolinio serverio, yra tikimybė, kad ryšys gali būti lėtas arba nutrūkęs. Tokiais atvejais gali būti naudinga rodyti skeleto ekraną, kad vartotojai žinotų, jog duomenys įkeliami, net jei tai užtrunka.

Kaip įdiegti „Skeleton“ ekraną „Next.js“.

Yra keletas būdų, kaip įdiegti skeleto ekranus „Next.js“. Galite naudoti integruotas funkcijas, kad rankiniu būdu atkurtumėte paprastą ekrano skeletą. Arba galite naudoti biblioteką kaip reaguoti-pakrovimas-skeletas arba Material UI, kad atliktumėte darbą už jus.

1 būdas: naudokite integruotas funkcijas

„Next.js“ galite naudoti skirtingi React kabliukai ir paprastos sąlygos rodyti skeleto ekranus. Galite naudoti && rekvizitas sąlyginiam ekranų skeleto atvaizdavimui.

importuoti {useState, useEffect} iš „reaguoti“;
funkcijaMano komponentas() {
konst [isLoading, setIsLoading] = useState(tiesa);


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


grąžinti (
<div>
 {įkeliama && (
<div>
 Įkeliama...
</div>
 )}
 {!Įkeliama && (
<div>
 Mano komponento turinys.
</div>
 )}
</div>
 );
}
eksportuotinumatytas MyComponent;

Aukščiau pateiktas kodas naudoja useState kabliukas, skirtas stebėti, ar duomenys įkeliami (iskraunama). Jis naudoja naudojimoEfektas kabliukas, kad imituotų duomenų įkėlimą asinchroniškai. Galiausiai jis naudoja && operatorių, kad sąlygiškai atvaizduotų skeleto ekraną arba komponento turinį.

Šis metodas nėra idealus, nes jį reikia nustatyti rankiniu būdu iskraunama būsena ir imituoja duomenų įkėlimą. Tačiau tai yra paprastas būdas įdiegti skeleto ekraną Next.js.

2 būdas: naudokite biblioteką, pvz., „Reaguoti-įkelti-skeletas“

Kitas būdas įdiegti skeleto ekranus yra naudoti tokią biblioteką kaip reaguoti-pakrovimas-skeletas. react-loading-skeleton yra React komponentas, kurį galite naudoti kurdami skeleto ekranus. Tai turi komponentas, kurį galite apvynioti aplink bet kurį vartotojo sąsajos elementą.

Norėdami naudoti react-loading-skeleton, turite jį įdiegti naudodami npm.

npm aš reaguoju-kraunu-skeletas

Įdiegę galite jį importuoti į Next.js programą ir naudoti taip:

importuoti Reaguoti iš „reaguoti“;
importuoti Skeletas iš 'reaguoja-pakrovimo-skeletas';
importuoti 'react-loading-skeleton/dist/skeleton.css'
konst Programėlė = () => {
grąžinti (
<div>
<Skeletas />
<h3>Antrasis ekranas</h3>
<Skeleto aukštis = {40} />
</div>
 );
};
eksportuotinumatytas Programėlė;

Aukščiau pateiktas kodas importuoja Skeletas komponentas iš react-loading-skeleton bibliotekos. Tada jis naudoja jį dviem skeleto ekranams sukurti. Jis naudoja aukščio rekvizitas skeleto ekrano aukščiui nustatyti. Dabar gali naudoti sąlyginį atvaizdavimą pateikti komponentą tik tada, kai yra duomenų.

3 būdas: medžiagos vartotojo sąsajos naudojimas

Jei Next.js programoje naudojate Material UI, galite naudoti komponentas iš @mui/medžiaga biblioteka. The Material UI komponentas turi keletą rekvizitų, kuriuos galite naudoti norėdami tinkinti skeleto ekraną.

Norėdami naudoti komponentas iš Material UI, pirmiausia turite jį įdiegti naudodami npm:

npm diegimas @mui/material

Įdiegę galite jį importuoti į Next.js programą ir naudoti taip:

importuoti Reaguoti iš „reaguoti“;
importuoti Skeletas iš „@mui/material/Skeleton“;
konst Programėlė = () => {
grąžinti (
<div>
<Skeleto variantas="ties" plotis={210} aukštis={118} />
<h3>Antrasis ekranas</h3>
<Skeleto variantas="tekstą" />
</div>
 );
};
eksportuotinumatytas Programėlė;

Aukščiau pateiktas kodas importuoja Skeletas komponentas iš @material-ui/lab biblioteka. Tada sukuriami du skeleto ekranai. The variantas prop nustato skeleto ekrano tipą. The plotis ir aukščio rekvizitai apibrėžia skeleto ekrano matmenis.

Taip pat galite pridėti įvairių animacijų į savo skeleto ekranus. Material UI turi keletą integruotų animacijų, kurias galite naudoti. Pavyzdžiui, galite naudoti pagyvinti rekvizitas, skirtas pridėti blukstančią animaciją prie savo skeleto ekranų:

importuoti Reaguoti iš „reaguoti“;
importuoti Skeletas iš „@mui/material/Skeleton“;
konst Programėlė = () => {
grąžinti (
<div>
<Skeleto variantas="ties" plotis={210} aukštis={118} />
<h3>Antrasis ekranas</h3>
<Skeleto variantas="tekstą" animuoti ="banga" />
</div>
 );
};
eksportuotinumatytas Programėlė;

Pridėjus pagyvinti remti į a komponentą, galite įtraukti vaizdinį judėjimą į savo vartotojo sąsają. The banga vertė prideda banguojančią animaciją prie skeleto ekrano. Dabar galite naudoti sąlyginį atvaizdavimą, kad rodytumėte turinį po skeleto ekranu.

Pagerinkite naudotojo patirtį naudodami „Skeleton“ ekranus

Skeleto ekranai gali būti puikus būdas pagerinti Next.js programos vartotojo patirtį. Jie gali padidinti suvokiamą greitį, sumažinti trūkumą ir pasiūlyti geresnę patirtį, kai duomenys perduodami lėtu arba nestabiliu ryšiu.

Nepriklausomai nuo pasirinkto metodo, kad pridėtumėte skeleto ekranus, jie yra puikus būdas pagerinti Next.js programos naudotojo patirtį.