Če ste uporabljali spletno ali mobilno aplikacijo, ste verjetno videli okostni zaslon. Ta naprava z uporabniškim vmesnikom zagotavlja bolj gladko izkušnjo, ko je posodobitev odvisna od prejemanja podatkov, kar lahko traja nekaj časa, preden pride.

Ugotovite, kaj točno je okvirni zaslon, zakaj bi ga morda želeli uporabiti v svoji aplikaciji in kako ga implementirati v Next.js.

Kaj je skeletni zaslon?

Okostni zaslon je element uporabniškega vmesnika, ki označuje, da se nekaj nalaga. Običajno je prazno ali "prazno" stanje komponente uporabniškega vmesnika brez podatkov. Če bi na primer naložili seznam elementov iz baze podatkov, bi bil okvirni zaslon lahko preprost seznam brez podatkov, le elementi polja z označbo mesta.

Številna spletna mesta in aplikacije uporabljajo skeletne zaslone. Nekateri jih uporabljajo za stanje nalaganja, drugi pa jih uporabljajo kot način za izboljšanje zaznane zmogljivosti.

Zakaj uporabljati skeletni zaslon?

Obstaja nekaj razlogov, zakaj bi morda želeli uporabiti okvirni zaslon v svoji aplikaciji Next.js.

instagram viewer

Prvič, lahko izboljša zaznano delovanje vaše aplikacije. Če uporabniki med nalaganjem podatkov vidijo prazen zaslon, lahko domnevajo, da je aplikacija počasna ali da ne deluje pravilno. Če pa vidijo okvirni zaslon, vedo, da se podatki nalagajo in aplikacija deluje po pričakovanjih.

Drugič, skeleton zasloni lahko pomagajo zmanjšati "tresenje" ali razpokanost v vašem uporabniškem vmesniku. Če se podatki nalagajo asinhrono, se lahko uporabniški vmesnik posodablja postopoma, ko vaša aplikacija prejema podatke. To lahko poskrbi za bolj gladko uporabniško izkušnjo.

Tretjič, skeletni zasloni lahko zagotovijo boljšo uporabniško izkušnjo, če se podatki nalagajo iz počasne ali nezanesljive povezave. Če se podatki pridobivajo z oddaljenega strežnika, obstaja možnost, da je povezava počasna ali prekinjena. V teh primerih je lahko koristno prikazati okvirni zaslon, tako da uporabniki vedo, da se podatki nalagajo, tudi če traja nekaj časa.

Kako implementirati skeletni zaslon v Next.js

Obstaja nekaj načinov za implementacijo skeletnih zaslonov v Next.js. Z vgrajenimi funkcijami lahko ročno ustvarite preprost okvirni zaslon. Lahko pa uporabite knjižnico, kot je okostje-react-loading-skeleton ali materialni uporabniški vmesnik, ki bo opravil delo namesto vas.

1. način: Uporaba vgrajenih funkcij

V Next.js lahko uporabite različne kljuke React in preproste pogoje za prikaz okostnih zaslonov. Lahko uporabite && prop za pogojno upodabljanje skeletnih zaslonov.

uvoz {useState, useEffect} od 'reagirati';
funkcijoMyComponent() {
konst [isLoading, setIsLoading] = useState(prav);


useEffect(() => {
 setTimeout(() => setIsLoading(lažno), 1000);
 }, []);


vrnitev (
<div>
 {isLoading && (
<div>
 Nalaganje...
</div>
 )}
 {!se nalaga && (
<div>
 Vsebina moje komponente.
</div>
 )}
</div>
 );
}
izvozprivzeto MyComponent;

Zgornja koda uporablja useState kavelj za spremljanje, ali se podatki nalagajo (isLoading). Uporablja useEffect kavelj za simulacijo asinhronega nalaganja podatkov. Končno uporablja && operater za pogojno upodobitev skeletnega zaslona ali vsebine komponente.

Ta metoda ni idealna, ker zahteva ročno nastavitev isLoading stanje in simulacijo nalaganja podatkov. Vendar je to preprost način za implementacijo skeletnega zaslona v Next.js.

2. način: Uporaba knjižnice, kot je »React-Loading-Skeleton«

Drug način za implementacijo skeletnih zaslonov je uporaba knjižnice, kot je okostje-react-loading-skeleton. react-loading-skeleton je komponenta React, ki jo lahko uporabite za ustvarjanje skeletnih zaslonov. Ima a komponento, ki jo lahko ovijete okoli katerega koli elementa uporabniškega vmesnika.

Če želite uporabljati react-loading-skeleton, ga morate namestiti z uporabo npm.

npm i react-loading-skeleton

Ko je nameščen, ga lahko uvozite v svojo aplikacijo Next.js in ga uporabite takole:

uvoz Reagiraj od 'reagirati';
uvoz Okostje od 'react-loading-skeleton';
uvoz 'react-loading-skeleton/dist/skeleton.css'
konst Aplikacija = () => {
vrnitev (
<div>
<Okostnjak />
<h3>Drugi zaslon</h3>
<Višina okostja={40} />
</div>
 );
};
izvozprivzeto aplikacija;

Zgornja koda uvozi Okostje komponenta iz knjižnice react-loading-skeleton. Nato ga uporabi za ustvarjanje dveh skeletnih zaslonov. Uporablja višina prop za nastavitev višine skeletnega zaslona. Zdaj lahko uporabite pogojno upodabljanje za upodobitev komponente le, ko so podatki prisotni.

3. način: Uporaba materialnega uporabniškega vmesnika

Če v aplikaciji Next.js uporabljate Material UI, lahko uporabite komponenta iz @mui/material knjižnica. The komponenta iz uporabniškega vmesnika Material ima nekaj rekvizitov, s katerimi lahko prilagodite okvirni zaslon.

Za uporabo komponento iz Material UI, jo morate najprej namestiti z uporabo npm:

namestitev npm @mui/material

Ko je nameščen, ga lahko uvozite v svojo aplikacijo Next.js in ga uporabite takole:

uvoz Reagiraj od 'reagirati';
uvoz Okostje od '@mui/material/Skeleton';
konst Aplikacija = () => {
vrnitev (
<div>
<Skeletna varianta="rect" širina={210} višina={118} />
<h3>Drugi zaslon</h3>
<Skeletna varianta="besedilo" />
</div>
 );
};
izvozprivzeto aplikacija;

Zgornja koda uvozi Okostje komponenta iz @material-ui/lab knjižnica. Nato ustvari dva skeletna zaslona. The varianta prop nastavi vrsto skeletnega zaslona. The premer in višina rekviziti določajo dimenzije skeletnega zaslona.

Svojim okostnim zaslonom lahko dodate tudi različne animacije. Material UI ima nekaj vgrajenih animacij, ki jih lahko uporabite. Na primer, lahko uporabite animirati prop za dodajanje bledeče animacije vašim okostnim zaslonom:

uvoz Reagiraj od 'reagirati';
uvoz Okostje od '@mui/material/Skeleton';
konst Aplikacija = () => {
vrnitev (
<div>
<Skeletna varianta="rect" širina={210} višina={118} />
<h3>Drugi zaslon</h3>
<Skeletna varianta="besedilo" animirati="val" />
</div>
 );
};
izvozprivzeto aplikacija;

Z dodajanjem animirati podpreti a komponento, lahko vizualno gibanje vključite v svoj uporabniški vmesnik. The val vrednost doda animacijo mahanja na zaslon okostnjaka. Zdaj lahko uporabite pogojno upodabljanje za prikaz vsebine po skeletnem zaslonu.

Izboljšajte uporabniško izkušnjo s Skeleton zasloni

Skeleton zasloni so lahko odličen način za izboljšanje uporabniške izkušnje vaše aplikacije Next.js. Povečajo lahko zaznano hitrost, zmanjšajo zastoje in ponudijo boljšo izkušnjo, ko podatki potujejo prek počasne ali nestabilne povezave.

Ne glede na način, ki ga izberete za dodajanje skeletnih zaslonov, so odličen način za izboljšanje uporabniške izkušnje vaše aplikacije Next.js.