Ha internetes vagy mobilalkalmazást használt, valószínűleg látott már egy képernyővázat. Ez az UI-eszköz simább élményt biztosít, ha a frissítés az adatok fogadásától függ, ami eltarthat egy ideig.

Tudja meg pontosan, mi az a képernyőváz, miért érdemes használni őket az alkalmazásban, és hogyan implementálhatja őket a Next.js-ben.

Mi az a csontváz képernyő?

A vázképernyő egy felhasználói felület elem, amely jelzi, hogy valami betöltődik. Ez általában egy UI-összetevő üres vagy „üres” állapota, adatok nélkül. Például, ha egy adatbázisból töltene be egy elemlistát, a váz képernyő egy egyszerű lista lehet, adatok nélkül, csak helyőrző dobozelemek.

Sok webhely és alkalmazás használ képernyővázlatokat. Egyesek betöltési állapothoz használják őket, míg mások az észlelt teljesítmény javítására használják őket.

Miért érdemes csontváz képernyőt használni?

Számos oka lehet annak, hogy érdemes lehet egy vázképernyőt használni a Next.js alkalmazásban.

Először is javíthatja az alkalmazás észlelt teljesítményét. Ha a felhasználók üres képernyőt látnak az adatok betöltése közben, feltételezhetik, hogy az alkalmazás lassú vagy nem működik megfelelően. Ha azonban látnak egy képernyővázat, tudják, hogy az adatok betöltése folyamatban van, és az alkalmazás a várt módon működik.

instagram viewer

Másodszor, a vázképernyők segíthetnek csökkenteni a felhasználói felület „jank”-át vagy szaggatottságát. Ha az adatok aszinkron módon töltődnek be, a felhasználói felület fokozatosan frissülhet, ahogy az alkalmazás adatokat fogad. Ez simább felhasználói élményt biztosíthat.

Harmadszor, a vázképernyők jobb felhasználói élményt nyújthatnak, ha az adatok lassú vagy megbízhatatlan kapcsolatról töltődnek be. Ha az adatok egy távoli szerverről kerülnek lekérésre, előfordulhat, hogy a kapcsolat lassú vagy megszakad. Ezekben az esetekben hasznos lehet egy képernyővázlat megjelenítése, hogy a felhasználók tudják, hogy az adatok betöltése folyamatban van, még akkor is, ha ez eltart egy ideig.

Skeleton Screen implementálása a Next.js-ben

A Next.js-ben többféleképpen is megvalósítható a vázképernyők. A beépített funkciók segítségével manuálisan hozhat létre egy egyszerű képernyővázat. Vagy használhat egy könyvtárat, például react-loading-csontváz vagy Material UI, hogy elvégezze a munkát Ön helyett.

1. módszer: A beépített szolgáltatások használata

A Next.js-ben használhatja különböző React horgok és egyszerű feltételek a csontváz képernyők megjelenítéséhez. Használhatja a && prop a vázképernyők feltételes rendereléséhez.

import {useState, useEffect} tól től 'reagál';
funkcióMyComponent() {
const [isLoading, setIsLoading] = useState(igaz);


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


Visszatérés (
<div>
 {isLoading && (
<div>
 Betöltés...
</div>
 )}
 {!Betöltés alatt && (
<div>
 Saját komponens tartalma.
</div>
 )}
</div>
 );
}
exportalapértelmezett MyComponent;

A fenti kód a useState hook az adatok betöltésének nyomon követésére (isBetöltés). Használja a useEffect horog az adatbetöltés aszinkron szimulálásához. Végül a && operátort, hogy feltételesen jelenítse meg a képernyővázat vagy az összetevő tartalmát.

Ez a módszer nem ideális, mert kézi beállítást igényel isBetöltés állapot és szimulálja az adatbetöltést. Ez azonban egy egyszerű módja a vázképernyő megvalósításának a Next.js-ben.

2. módszer: olyan könyvtár használata, mint a „React-Loading-Skeleton”

A vázképernyők megvalósításának másik módja a könyvtárhoz hasonló react-loading-csontváz. A react-loading-skeleton egy React komponens, amellyel váz-képernyőket hozhat létre. Van egy komponens, amelyet bármely felhasználói felület elem köré tekerhet.

A react-loading-skeleton használatához telepítenie kell a segítségével npm.

npm i react-loading-skeleton

Miután telepítette, importálhatja a Next.js alkalmazásba, és a következőképpen használhatja:

import Reagál tól től 'reagál';
import Csontváz tól től 'react-loading-skeleton';
import 'react-loading-skeleton/dist/skeleton.css'
const App = () => {
Visszatérés (
<div>
<csontváz />
<h3>Második képernyő</h3>
<Csontváz magasság={40} />
</div>
 );
};
exportalapértelmezett App;

A fenti kód importálja a Csontváz komponens a react-loading-skeleton könyvtárból. Ezt követően két vázképernyő létrehozására használja. Használja a magasság prop a váz képernyő magasságának beállításához. Most már tudod feltételes renderelést használjon hogy az összetevő csak akkor jelenjen meg, ha az adatok jelen vannak.

3. módszer: Material UI használata

Ha Material UI-t használ a Next.js alkalmazásban, használhatja a komponens a @mui/anyag könyvtár. A A Material UI összetevőjének van néhány kelléke, amelyek segítségével testreszabhatja a vázképernyőt.

Használatához a összetevőt a Material UI-ból, először telepítenie kell az npm használatával:

npm telepítés @mui/material

Miután telepítette, importálhatja a Next.js alkalmazásba, és a következőképpen használhatja:

import Reagál tól től 'reagál';
import Csontváz tól től '@mui/anyag/csontváz';
const App = () => {
Visszatérés (
<div>
<Csontváz változat="rect" szélesség={210} magasság={118} />
<h3>Második képernyő</h3>
<Csontváz változat="szöveg" />
</div>
 );
};
exportalapértelmezett App;

A fenti kód importálja a Csontváz komponens a @anyag-ui/labor könyvtár. Ezután két váz képernyőt hoz létre. A változat prop beállítja a váz képernyő típusát. A szélesség és magasság kellékek határozzák meg a váz képernyő méreteit.

Különféle animációkat is hozzáadhat a vázképernyőhöz. A Material UI néhány beépített animációval rendelkezik, amelyeket használhat. Használhatja például a élő javaslat egy elhalványuló animáció hozzáadásához a vázképernyőkhöz:

import Reagál tól től 'reagál';
import Csontváz tól től '@mui/anyag/csontváz';
const App = () => {
Visszatérés (
<div>
<Csontváz változat="rect" szélesség={210} magasság={118} />
<h3>Második képernyő</h3>
<Csontváz változat="szöveg" animálni="hullám" />
</div>
 );
};
exportalapértelmezett App;

Hozzáadva a élő támaszt a komponenst, vizuális mozgást is beépíthet felhasználói felületébe. A hullám érték hullámzó animációt ad a vázképernyőhöz. Mostantól feltételes megjelenítést használhat a tartalom megjelenítéséhez a vázképernyő után.

Javítsa a felhasználói élményt a Skeleton képernyőkkel

A csontváz képernyők nagyszerű lehetőséget jelentenek a Next.js alkalmazás felhasználói élményének javítására. Növelhetik az észlelt sebességet, csökkenthetik a zökkenőmentességet, és jobb élményt kínálnak, amikor az adatátvitel lassú vagy instabil kapcsolaton keresztül történik.

Bármelyik módszert választja is a képernyővázak hozzáadásához, ezek nagyszerű lehetőséget jelentenek a Next.js alkalmazás felhasználói élményének javítására.