Pokud jste použili webovou nebo mobilní aplikaci, pravděpodobně jste viděli kostru obrazovky. Toto zařízení uživatelského rozhraní poskytuje plynulejší zážitek, když aktualizace závisí na příjmu dat, což může chvíli trvat, než dorazí.

Zjistěte, co přesně je skeleton screen, proč byste je mohli chtít použít ve své aplikaci a jak je implementovat do Next.js.

Co je to Skeleton Screen?

Obrazovka kostry je prvek uživatelského rozhraní, který označuje, že se něco načítá. Obvykle se jedná o prázdný nebo „prázdný“ stav komponenty uživatelského rozhraní bez jakýchkoli dat. Pokud byste například načetli seznam položek z databáze, základní obrazovka by mohla být jednoduchým seznamem bez dat, pouze zástupnými prvky rámečku.

Mnoho webů a aplikací používá základní obrazovky. Někteří je používají pro stav načítání, zatímco jiní je používají jako způsob, jak zlepšit vnímaný výkon.

Proč používat Skeleton Screen?

Existuje několik důvodů, proč byste mohli chtít v aplikaci Next.js používat kostru obrazovky.

Za prvé, může zlepšit vnímaný výkon vaší aplikace. Pokud uživatelé během načítání dat vidí prázdnou obrazovku, mohou předpokládat, že aplikace je pomalá nebo nefunguje správně. Pokud však uvidí základní obrazovku, vědí, že se data načítají a aplikace funguje podle očekávání.

instagram viewer

Za druhé, skeletové obrazovky mohou pomoci snížit „škubání“ nebo trhání ve vašem uživatelském rozhraní. Pokud se data načítají asynchronně, může se uživatelské rozhraní aktualizovat postupně, jak vaše aplikace přijímá data. To může zajistit hladší uživatelský zážitek.

Za třetí, základní obrazovky mohou poskytnout lepší uživatelský zážitek, pokud jsou data načítána z pomalého nebo nespolehlivého připojení. Pokud jsou data načítána ze vzdáleného serveru, je pravděpodobné, že připojení bude pomalé nebo přerušené. V těchto případech může být užitečné zobrazit základní obrazovku, aby uživatelé věděli, že se data načítají, i když to chvíli trvá.

Jak implementovat Skeleton Screen v Next.js

Existuje několik způsobů, jak implementovat obrazovky kostry v Next.js. Pomocí vestavěných funkcí můžete ručně znovu vytvořit jednoduchou kostru obrazovky. Nebo můžete použít knihovnu jako reagovat-loading-skeleton nebo Material UI, které tuto práci udělá za vás.

Metoda 1: Použití vestavěných funkcí

V Next.js můžete použít různé háky React a jednoduché podmínky pro zobrazení obrazovek kostry. Můžete použít && podpora pro podmíněné vykreslení obrazovek kostry.

import {useState, useEffect} z 'reagovat';
funkceMyComponent() {
konst [isLoading, setIsLoading] = useState(skutečný);


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


vrátit se (
<div>
 {isLoading && (
<div>
 Načítání...
</div>
 )}
 {!isLoading && (
<div>
 Obsah mého komponentu.
</div>
 )}
</div>
 );
}
vývoznívýchozí MyComponent;

Výše uvedený kód používá useState háček pro sledování, zda se data načítají (isLoading). Používá se useEffect hák pro simulaci načítání dat asynchronně. Nakonec používá && operátor pro podmíněné vykreslení obrazovky kostry nebo obsahu součásti.

Tato metoda není ideální, protože vyžaduje ruční nastavení isLoading stav a simulace načítání dat. Je to však jednoduchý způsob, jak implementovat skeleton screen do Next.js.

Metoda 2: Použití knihovny jako „React-Loading-Skeleton“

Dalším způsobem, jak implementovat kostru obrazovek, je použít knihovnu jako reagovat-loading-skeleton. React-loading-skeleton je komponenta React, kterou můžete použít k vytvoření obrazovek kostry. Má to komponentu, kterou můžete obalit kolem jakéhokoli prvku uživatelského rozhraní.

Chcete-li použít reagovat-načítání-skelet, musíte jej nainstalovat pomocí npm.

npm i reagovat-loading-skeleton

Jakmile je nainstalována, můžete ji importovat do své aplikace Next.js a používat ji takto:

import Reagovat z 'reagovat';
import Kostra z 'react-loading-skeleton';
import 'reagovat-načítání-skelet/dist/skelet.css'
konst Aplikace = () => {
vrátit se (
<div>
<Kostra />
<h3>Druhá obrazovka</h3>
<Výška kostry={40} />
</div>
 );
};
vývoznívýchozí Aplikace;

Výše uvedený kód importuje Kostra komponentu z knihovny reagovat-načítání-skelet. Z něj pak vytvoří dvě základní obrazovky. Používá se výška podpěra pro nastavení výšky obrazovky kostry. Teď můžeš použít podmíněné vykreslování vykreslit komponentu pouze tehdy, když jsou k dispozici data.

Metoda 3: Použití Material UI

Pokud v aplikaci Next.js používáte Material UI, můžete použít komponenta z @mui/materiál knihovna. The komponenta z Material UI má několik rekvizit, které můžete použít k přizpůsobení obrazovky kostry.

Chcete-li použít komponentu z Material UI, musíte ji nejprve nainstalovat pomocí npm:

instalace npm @mui/material

Jakmile je nainstalována, můžete ji importovat do své aplikace Next.js a používat ji takto:

import Reagovat z 'reagovat';
import Kostra z '@mui/material/Skeleton';
konst Aplikace = () => {
vrátit se (
<div>
<Varianta kostry="rect" šířka={210} výška={118} />
<h3>Druhá obrazovka</h3>
<Varianta kostry="text" />
</div>
 );
};
vývoznívýchozí Aplikace;

Výše uvedený kód importuje Kostra komponenta z @material-ui/lab knihovna. Poté vytvoří dvě základní obrazovky. The varianta prop nastavuje typ obrazovky kostry. The šířka a výška rekvizity definují rozměry skeletové obrazovky.

Na obrazovky kostry můžete také přidat různé animace. Material UI má několik vestavěných animací, které můžete použít. Můžete například použít animovat rekvizita pro přidání blednoucí animace na obrazovky kostry:

import Reagovat z 'reagovat';
import Kostra z '@mui/material/Skeleton';
konst Aplikace = () => {
vrátit se (
<div>
<Varianta kostry="rect" šířka={210} výška={118} />
<h3>Druhá obrazovka</h3>
<Varianta kostry="text" animovat="mávat" />
</div>
 );
};
vývoznívýchozí Aplikace;

Přidáním animovat podpěra k a můžete do svého uživatelského rozhraní začlenit vizuální pohyb. The mávat value přidá mávající animaci na obrazovku kostry. Nyní můžete použít podmíněné vykreslování k zobrazení obsahu po obrazovce kostry.

Zlepšete uživatelskou zkušenost s obrazovkami Skeleton

Skeleton obrazovky mohou být skvělým způsobem, jak zlepšit uživatelský dojem z vaší aplikace Next.js. Mohou zvýšit vnímanou rychlost, snížit nepříjemnosti a nabídnout lepší zážitek, když data putují přes pomalé nebo nestabilní připojení.

Ať už zvolíte jakoukoli metodu přidání základních obrazovek, je to skvělý způsob, jak zlepšit uživatelský dojem z vaší aplikace Next.js.