Ak ste použili webovú alebo mobilnú aplikáciu, pravdepodobne ste videli kostru obrazovky. Toto zariadenie s používateľským rozhraním poskytuje plynulejšie prostredie, keď aktualizácia závisí od prijímania údajov, ktorých doručenie môže chvíľu trvať.

Zistite, čo presne je skeletová obrazovka, prečo by ste ich mohli chcieť použiť vo svojej aplikácii a ako ich implementovať do Next.js.

Čo je to Skeleton Screen?

Obrazovka kostry je prvok používateľského rozhrania, ktorý naznačuje, že sa niečo načítava. Zvyčajne ide o prázdny alebo „prázdny“ stav komponentu používateľského rozhrania bez akýchkoľvek údajov. Ak by ste napríklad načítali zoznam položiek z databázy, kostra obrazovky môže byť jednoduchý zoznam bez údajov, iba prvky zástupného poľa.

Mnoho webových stránok a aplikácií používa skeletové obrazovky. Niektorí ich používajú na stav načítania, zatiaľ čo iní ich používajú ako spôsob, ako zlepšiť vnímaný výkon.

Prečo používať Skeleton Screen?

Existuje niekoľko dôvodov, prečo by ste mohli chcieť použiť kostru obrazovky v aplikácii Next.js.

instagram viewer

Po prvé, môže zlepšiť vnímaný výkon vašej aplikácie. Ak sa používateľom počas načítavania údajov zobrazí prázdna obrazovka, môžu predpokladať, že aplikácia je pomalá alebo nefunguje správne. Ak však uvidia kostru obrazovky, vedia, že sa načítavajú údaje a aplikácia funguje podľa očakávania.

Po druhé, skeletové obrazovky môžu pomôcť znížiť „trhanie“ alebo trhanie vo vašom používateľskom rozhraní. Ak sa údaje načítavajú asynchrónne, používateľské rozhranie sa môže aktualizovať postupne, keď vaša aplikácia prijíma údaje. To môže zabezpečiť plynulejší používateľský zážitok.

Po tretie, skeletové obrazovky môžu poskytnúť lepšiu používateľskú skúsenosť, ak sa údaje načítavajú z pomalého alebo nespoľahlivého pripojenia. Ak sa údaje načítavajú zo vzdialeného servera, je pravdepodobné, že pripojenie bude pomalé alebo prerušené. V týchto prípadoch môže byť užitočné zobraziť kostru obrazovky, aby používatelia vedeli, že sa údaje načítavajú, aj keď to chvíľu trvá.

Ako implementovať Skeleton Screen v Next.js

Existuje niekoľko spôsobov, ako implementovať obrazovky kostry v Next.js. Pomocou vstavaných funkcií môžete manuálne vytvoriť jednoduchú kostru obrazovky. Alebo môžete použiť knižnicu napr reagovať-načítať-skelet alebo Material UI, aby to urobil za vás.

Metóda 1: Použitie vstavaných funkcií

V Next.js môžete použiť rôzne React háčiky a jednoduché podmienky na zobrazenie obrazoviek kostry. Môžete použiť && rekvizita na podmienené vykreslenie obrazoviek kostry.

importovať {useState, useEffect} od 'reagovať';
funkciuMyComponent() {
konšt [isLoading, setIsLoading] = useState(pravda);


useEffect(() => {
 setTimeout(() => setIsLoading(falošný), 1000);
 }, []);


vrátiť (
<div>
 {isLoading && (
<div>
 Načítava...
</div>
 )}
 {!isLoading && (
<div>
 Obsah môjho komponentu.
</div>
 )}
</div>
 );
}
exportpredvolená MyComponent;

Vyššie uvedený kód používa useState háčik na sledovanie, či sa údaje načítavajú (isLoading). Používa sa useEffect hák na simuláciu načítavania údajov asynchrónne. Nakoniec používa && operátora na podmienené vykreslenie obrazovky kostry alebo obsahu komponentu.

Táto metóda nie je ideálna, pretože vyžaduje manuálne nastavenie isLoading stav a simulovanie načítania dát. Je to však jednoduchý spôsob, ako implementovať skeleton screen do Next.js.

Metóda 2: Použitie knižnice ako „React-Loading-Skeleton“

Ďalším spôsobom, ako implementovať skeletové obrazovky, je použiť knižnicu ako reagovať-načítať-skelet. React-loading-skeleton je komponent React, ktorý môžete použiť na vytváranie obrazoviek. Má a komponent, ktorý môžete obaliť okolo akéhokoľvek prvku používateľského rozhrania.

Ak chcete použiť reakčnú-načítavaciu kostru, musíte ju nainštalovať pomocou npm.

npm i reaguj-naklada-kostra

Po nainštalovaní ju môžete importovať do svojej aplikácie Next.js a používať ju takto:

importovať Reagovať od 'reagovať';
importovať Kostra od 'react-loading-skeleton';
importovať 'reagovat-nakladacia-kostra/dist/kostra.css'
konšt Aplikácia = () => {
vrátiť (
<div>
<kostra />
<h3>Druhá obrazovka</h3>
<Výška kostry={40} />
</div>
 );
};
exportpredvolená App;

Vyššie uvedený kód importuje súbor Kostra komponent z knižnice reakčnej-nakladacej kostry. Potom ho použije na vytvorenie dvoch základných obrazoviek. Používa sa výška rekvizita na nastavenie výšky obrazovky kostry. Teraz môžeš použiť podmienené vykresľovanie aby sa komponent vykreslil iba vtedy, keď sú k dispozícii údaje.

Metóda 3: Použitie Material UI

Ak v aplikácii Next.js používate Material UI, môžete použiť komponent z @mui/materiál knižnica. The komponent z Material UI má niekoľko rekvizít, ktoré môžete použiť na prispôsobenie obrazovky kostry.

Ak chcete použiť komponent z Material UI, najprv ho musíte nainštalovať pomocou npm:

inštalácia npm @mui/material

Po nainštalovaní ju môžete importovať do svojej aplikácie Next.js a používať ju takto:

importovať Reagovať od 'reagovať';
importovať Kostra od '@mui/material/Skeleton';
konšt Aplikácia = () => {
vrátiť (
<div>
<Variant kostry="rect" šírka={210} výška={118} />
<h3>Druhá obrazovka</h3>
<Variant kostry="text" />
</div>
 );
};
exportpredvolená App;

Vyššie uvedený kód importuje súbor Kostra komponent z @material-ui/lab knižnica. Potom vytvorí dve kostrové obrazovky. The varianta prop nastavuje typ obrazovky kostry. The šírka a výška rekvizity definujú rozmery obrazovky skeletu.

Na obrazovky kostry môžete tiež pridať rôzne animácie. Material UI má niekoľko vstavaných animácií, ktoré môžete použiť. Môžete napríklad použiť animovať rekvizita na pridanie slabnúcej animácie na obrazovky kostry:

importovať Reagovať od 'reagovať';
importovať Kostra od '@mui/material/Skeleton';
konšt Aplikácia = () => {
vrátiť (
<div>
<Variant kostry="rect" šírka={210} výška={118} />
<h3>Druhá obrazovka</h3>
<Variant kostry="text" animovať ="mávať" />
</div>
 );
};
exportpredvolená App;

Pridaním animovať podpera do a komponent, môžete do svojho používateľského rozhrania začleniť vizuálny pohyb. The mávať value pridá mávaciu animáciu na obrazovku kostry. Teraz môžete použiť podmienené vykresľovanie na zobrazenie obsahu po obrazovke kostry.

Zlepšite používateľskú skúsenosť pomocou obrazoviek Skeleton

Skeleton obrazovky môžu byť skvelým spôsobom, ako zlepšiť používateľskú skúsenosť s aplikáciou Next.js. Môžu zvýšiť vnímanú rýchlosť, znížiť zasekávanie a ponúknuť lepší zážitok, keď dáta prechádzajú cez pomalé alebo nestabilné pripojenie.

Bez ohľadu na to, akú metódu pridania kostry obrazoviek zvolíte, sú skvelým spôsobom, ako zlepšiť používateľskú skúsenosť s aplikáciou Next.js.