Ako ste koristili web ili mobilnu aplikaciju, vjerojatno ste vidjeli kostur zaslona. Ovaj uređaj s korisničkim sučeljem pruža lakši doživljaj kada ažuriranje ovisi o primanju podataka, što može potrajati dok ne stigne.

Saznajte što je točno kostur zaslona, ​​zašto biste ga trebali koristiti u svojoj aplikaciji i kako ga implementirati u Next.js.

Što je kostur zaslona?

Kostur zaslona je UI element koji označava da se nešto učitava. To je obično prazno ili "prazno" stanje komponente korisničkog sučelja, bez ikakvih podataka. Na primjer, ako biste trebali učitati popis stavki iz baze podataka, kostur zaslona bi mogao biti jednostavan popis bez podataka, samo elementi okvira rezerviranog mjesta.

Mnoga web-mjesta i aplikacije koriste kosture zaslona. Neki ih koriste za stanje učitavanja, dok ih drugi koriste kao način poboljšanja percipirane izvedbe.

Zašto koristiti Skeleton Screen?

Postoji nekoliko razloga zašto biste mogli koristiti kostur zaslona u svojoj aplikaciji Next.js.

Prvo, može poboljšati percipiranu izvedbu vaše aplikacije. Ako korisnici vide prazan zaslon dok se podaci učitavaju, mogu pretpostaviti da je aplikacija spora ili da ne radi ispravno. Međutim, ako vide kostur zaslona, ​​znaju da se podaci učitavaju i da aplikacija radi prema očekivanjima.

instagram viewer

Kao drugo, kosturni zasloni mogu pomoći u smanjenju "treska" ili isprekidanosti u vašem korisničkom sučelju. Ako se podaci učitavaju asinkrono, korisničko sučelje može se postupno ažurirati kako vaša aplikacija prima podatke. To može omogućiti glatko korisničko iskustvo.

Treće, kosturni zasloni mogu pružiti bolje korisničko iskustvo ako se podaci učitavaju sa spore ili nepouzdane veze. Ako se podaci dohvaćaju s udaljenog poslužitelja, postoji mogućnost da je veza spora ili prekinuta. U tim slučajevima može biti korisno prikazati kostur zaslona kako bi korisnici znali da se podaci učitavaju, čak i ako to potraje neko vrijeme.

Kako implementirati kostur zaslona u Next.js

Postoji nekoliko načina za implementaciju kostura zaslona u Next.js. Možete koristiti ugrađene značajke za ručno ponovno stvaranje jednostavnog kostura zaslona. Ili možete koristiti knjižnicu poput kostur-opterećenja reakcije ili Material UI koji će obaviti posao umjesto vas.

Metoda 1: Korištenje ugrađenih značajki

U Next.js možete koristiti različite React kuke i jednostavni uvjeti za prikaz kostura zaslona. Možete koristiti && podupirač za uvjetno prikazivanje kostura zaslona.

uvoz {useState, useEffect} iz 'reagirati';
funkcijaMoja komponenta() {
konst [isLoading, setIsLoading] = useState(pravi);


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


povratak (
<div>
 {isLoading && (
<div>
 Učitavam...
</div>
 )}
 {!učitava se && (
<div>
 Sadržaj moje komponente.
</div>
 )}
</div>
 );
}
izvozzadano MyComponent;

Gornji kod koristi useState kuka za praćenje učitavaju li se podaci (isLoading). Koristi se useEffect kuka za simulaciju asinkronog učitavanja podataka. Konačno, koristi se && operator za uvjetno prikazivanje kostura zaslona ili sadržaja komponente.

Ova metoda nije idealna, jer zahtijeva ručno postavljanje isLoading stanje i simuliranje učitavanja podataka. Međutim, to je jednostavan način implementacije kostura zaslona u Next.js.

Metoda 2: Korištenje biblioteke poput 'React-Loading-Skeleton'

Drugi način za implementaciju kostura zaslona je korištenje knjižnice poput kostur-opterećenja reakcije. react-loading-skeleton je React komponenta koju možete koristiti za izradu kostura zaslona. Ono ima komponentu koju možete omotati oko bilo kojeg elementa korisničkog sučelja.

Da biste koristili react-loading-skeleton, morate ga instalirati pomoću npm.

npm reagiram-učitavanje-kostura

Nakon što se instalira, možete ga uvesti u svoju aplikaciju Next.js i koristiti ovako:

uvoz Reagirati iz 'reagirati';
uvoz Kostur iz 'react-loading-skeleton';
uvoz 'react-loading-skeleton/dist/skeleton.css'
konst Aplikacija = () => {
povratak (
<div>
<Kostur />
<h3>Drugi ekran</h3>
<Visina kostura={40} />
</div>
 );
};
izvozzadano aplikacija;

Gornji kod uvozi Kostur komponenta iz biblioteke react-loading-skeleton. Zatim ga koristi za stvaranje dva kostura zaslona. Koristi se visina podupirač za postavljanje visine kosturnog zaslona. Sada možeš koristiti uvjetno prikazivanje za renderiranje komponente samo kada su podaci prisutni.

3. metoda: korištenje korisničkog sučelja materijala

Ako koristite Material UI u svojoj aplikaciji Next.js, možete koristiti komponenta iz @mui/materijal knjižnica. The komponenta iz Material UI ima nekoliko rekvizita koje možete koristiti za prilagodbu kostura zaslona.

Za korištenje komponentu iz Material UI-a, prvo je trebate instalirati pomoću npm-a:

npm instalirati @mui/material

Nakon što se instalira, možete ga uvesti u svoju aplikaciju Next.js i koristiti ovako:

uvoz Reagirati iz 'reagirati';
uvoz Kostur iz '@mui/material/Skeleton';
konst Aplikacija = () => {
povratak (
<div>
<Kosturna varijanta="ispravan" širina={210} visina={118} />
<h3>Drugi ekran</h3>
<Kosturna varijanta="tekst" />
</div>
 );
};
izvozzadano aplikacija;

Gornji kod uvozi Kostur komponenta iz @material-ui/lab knjižnica. Zatim stvara dva kostura zaslona. The varijanta prop postavlja vrstu kosturnog zaslona. The širina i visina rekviziti definiraju dimenzije kosturnog zaslona.

Također možete dodati različite animacije svojim zaslonima kostura. Material UI ima nekoliko ugrađenih animacija koje možete koristiti. Na primjer, možete koristiti animirati rekvizit za dodavanje blijedih animacija na vaše kosturne zaslone:

uvoz Reagirati iz 'reagirati';
uvoz Kostur iz '@mui/material/Skeleton';
konst Aplikacija = () => {
povratak (
<div>
<Kosturna varijanta="ispravan" širina={210} visina={118} />
<h3>Drugi ekran</h3>
<Kosturna varijanta="tekst" animirati="val" />
</div>
 );
};
izvozzadano aplikacija;

Dodavanjem animirati podupirati a komponentu, možete ugraditi vizualni pokret u svoje korisničko sučelje. The val value dodaje animaciju mahanja na zaslon kostura. Sada možete koristiti uvjetno prikazivanje za prikaz sadržaja nakon kosturnog zaslona.

Poboljšajte korisničko iskustvo uz Skeleton zaslone

Skeleton zasloni mogu biti izvrstan način za poboljšanje korisničkog iskustva vaše aplikacije Next.js. Mogu povećati percipiranu brzinu, smanjiti zastoj i ponuditi bolje iskustvo kada podaci putuju preko spore ili nestabilne veze.

Koji god način da odaberete za dodavanje kosturnih zaslona, ​​oni su sjajan način za poboljšanje korisničkog iskustva vaše aplikacije Next.js.