Dacă ați folosit o aplicație web sau mobilă, probabil că ați văzut un ecran schelet. Acest dispozitiv cu interfață de utilizare oferă o experiență mai fluidă atunci când o actualizare depinde de primirea datelor, care poate dura ceva timp să ajungă.

Aflați exact ce este un ecran schelet, de ce ați putea dori să le utilizați în aplicația dvs. și cum să le implementați în Next.js.

Ce este un ecran schelet?

Un ecran schelet este un element UI care indică faptul că ceva se încarcă. De obicei, este o stare goală sau „vid” a unei componente UI, fără date. De exemplu, dacă ar trebui să încărcați o listă de articole dintr-o bază de date, ecranul schelet ar putea fi o listă simplă fără date, doar elemente de casetă substituentă.

Multe site-uri web și aplicații folosesc ecrane schelet. Unii le folosesc pentru o stare de încărcare, în timp ce alții le folosesc ca o modalitate de a îmbunătăți performanța percepută.

De ce să folosiți un ecran schelet?

Există câteva motive pentru care ați putea dori să utilizați un ecran schelet în aplicația dvs. Next.js.

instagram viewer

În primul rând, poate îmbunătăți performanța percepută a aplicației dvs. Dacă utilizatorii văd un ecran gol în timp ce datele sunt încărcate, ei pot presupune că aplicația este lentă sau nu funcționează corect. Cu toate acestea, dacă văd un ecran schelet, ei știu că datele sunt în curs de încărcare și aplicația funcționează conform așteptărilor.

În al doilea rând, ecranele de tip schelet pot ajuta la reducerea „brutului” sau agitație în interfața dvs. de utilizare. Dacă datele sunt încărcate asincron, interfața de utilizare se poate actualiza progresiv pe măsură ce aplicația dvs. primește date. Acest lucru poate asigura o experiență mai fluidă pentru utilizator.

În al treilea rând, ecranele schelet pot oferi o experiență mai bună pentru utilizator dacă datele sunt încărcate dintr-o conexiune lentă sau nesigură. Dacă datele sunt preluate de la un server la distanță, există șansa ca conexiunea să fie lentă sau întreruptă. În aceste cazuri, poate fi util să afișați un ecran schelet, astfel încât utilizatorii să știe că datele sunt încărcate, chiar dacă durează ceva timp.

Cum să implementați un ecran schelet în Next.js

Există câteva moduri de a implementa ecrane schelet în Next.js. Puteți utiliza funcțiile încorporate pentru a recrea manual un ecran schelet simplu. Sau poți folosi o bibliotecă ca reacție-încărcare-schelet sau Material UI pentru a face treaba pentru tine.

Metoda 1: Utilizarea caracteristicilor încorporate

În Next.js, puteți utiliza diferite cârlige React și condiții simple pentru a afișa ecranele scheletului. Puteți folosi && prop pentru a reda condiționat ecranele scheletului.

import {useState, useEffect} din 'reacţiona';
funcţieMyComponent() {
const [isLoading, setIsLoading] = useState(Adevărat);


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


întoarcere (
<div>
 {se incarca && (
<div>
 Se încarcă...
</div>
 )}
 {!se incarca && (
<div>
 Conținutul meu component.
</div>
 )}
</div>
 );
}
exportMod implicit MyComponent;

Codul de mai sus folosește useState cârlig pentru a urmări dacă datele se încarcă (se incarca). Acesta folosește useEffect cârlig pentru a simula încărcarea asincronă a datelor. În cele din urmă, folosește && operator pentru a reda condiționat ecranul scheletului sau conținutul componentei.

Această metodă nu este ideală, deoarece necesită setarea manuală a se incarca starea și simularea încărcării datelor. Cu toate acestea, este o modalitate simplă de a implementa un ecran schelet în Next.js.

Metoda 2: Utilizarea unei biblioteci precum „React-Loading-Skeleton”

O altă modalitate de a implementa ecranele schelet este să folosești o bibliotecă ca reacție-încărcare-schelet. react-loading-skeleton este o componentă React pe care o puteți folosi pentru a crea ecrane schelet. Are o componentă pe care o puteți înfășura în jurul oricărui element UI.

Pentru a utiliza react-loading-skeleton, trebuie să îl instalați folosind npm.

npm i reacţionează-încărcare-schelet

După ce este instalat, îl puteți importa în aplicația dvs. Next.js și îl puteți utiliza astfel:

import Reacţiona din 'reacţiona';
import Schelet din „schelet-încărcare-reacție”;
import 'react-loading-skeleton/dist/skeleton.css'
const Aplicație = () => {
întoarcere (
<div>
<Scheletul />
<h3>Al doilea ecran</h3>
<Înălțimea scheletului={40} />
</div>
 );
};
exportMod implicit Aplicație;

Codul de mai sus importă Schelet componentă din biblioteca react-încărcare-schelet. Apoi îl folosește pentru a crea două ecrane schelet. Acesta folosește înălţime prop pentru a seta înălțimea ecranului scheletului. Acum poti utilizați redarea condiționată pentru a reda componenta numai atunci când datele sunt prezente.

Metoda 3: Utilizarea materialelor UI

Dacă utilizați Material UI în aplicația dvs. Next.js, puteți utiliza componentă din @mui/material bibliotecă. The componenta din Material UI are câteva elemente de recuzită pe care le puteți folosi pentru a personaliza ecranul schelet.

Pentru a utiliza componentă din Material UI, mai întâi trebuie să o instalați folosind npm:

instalare npm @mui/material

După ce este instalat, îl puteți importa în aplicația dvs. Next.js și îl puteți utiliza astfel:

import Reacţiona din 'reacţiona';
import Schelet din „@mui/material/Skeleton”;
const Aplicație = () => {
întoarcere (
<div>
<Varianta schelet="rect" lățime={210} înălțime={118} />
<h3>Al doilea ecran</h3>
<Varianta schelet="text" />
</div>
 );
};
exportMod implicit Aplicație;

Codul de mai sus importă Schelet componentă din @material-ui/lab bibliotecă. Apoi creează două ecrane schelet. The variantă prop setează tipul de ecran schelet. The lăţime și înălţime recuzita definesc dimensiunile ecranului scheletului.

De asemenea, puteți adăuga diferite animații pe ecranele dvs. scheletice. Material UI are câteva animații încorporate pe care le puteți utiliza. De exemplu, puteți utiliza anima prop pentru a adăuga o animație de estompare pe ecranele dvs. de schelet:

import Reacţiona din 'reacţiona';
import Schelet din „@mui/material/Skeleton”;
const Aplicație = () => {
întoarcere (
<div>
<Varianta schelet="rect" lățime={210} înălțime={118} />
<h3>Al doilea ecran</h3>
<Varianta schelet="text" anima="val" />
</div>
 );
};
exportMod implicit Aplicație;

Prin adăugarea anima prop la a componentă, puteți încorpora mișcarea vizuală în interfața cu utilizatorul. The val valoare adaugă o animație ondulată pe ecranul scheletului. Acum puteți utiliza redarea condiționată pentru a afișa conținutul după ecranul schelet.

Îmbunătățiți experiența utilizatorului cu ecranele Skeleton

Ecranele de tip schelet pot fi o modalitate excelentă de a îmbunătăți experiența utilizatorului aplicației dvs. Next.js. Acestea pot crește viteza percepută, pot reduce frecvența și pot oferi o experiență mai bună atunci când datele circulă printr-o conexiune lentă sau instabilă.

Indiferent de metoda pe care o alegeți pentru a adăuga ecrane schelet, acestea sunt o modalitate excelentă de a îmbunătăți experiența utilizatorului aplicației dvs. Next.js.