Se hai utilizzato un'app Web o mobile, probabilmente hai visto uno schermo scheletrico. Questo dispositivo dell'interfaccia utente offre un'esperienza più fluida quando un aggiornamento dipende dalla ricezione dei dati, che potrebbe richiedere del tempo per arrivare.

Scopri esattamente cos'è uno scheletro dello schermo, perché potresti volerlo utilizzare nella tua app e come implementarlo in Next.js.

Cos'è uno schermo scheletro?

Una schermata scheletro è un elemento dell'interfaccia utente che indica che qualcosa si sta caricando. In genere è uno stato vuoto o "vuoto" di un componente dell'interfaccia utente, senza dati. Ad esempio, se dovessi caricare un elenco di elementi da un database, lo scheletro dello schermo potrebbe essere un semplice elenco senza dati, solo elementi di casella segnaposto.

Molti siti Web e app utilizzano schermate scheletriche. Alcuni li usano per uno stato di caricamento, mentre altri li usano come un modo per migliorare le prestazioni percepite.

Perché utilizzare uno schermo scheletro?

instagram viewer

Ci sono alcuni motivi per cui potresti voler utilizzare uno scheletro nella tua app Next.js.

Innanzitutto, può migliorare le prestazioni percepite della tua app. Se gli utenti visualizzano una schermata vuota durante il caricamento dei dati, potrebbero presumere che l'app sia lenta o non funzioni correttamente. Tuttavia, se vedono una schermata scheletrica, sanno che i dati vengono caricati e l'app funziona come previsto.

In secondo luogo, gli schermi scheletrici possono aiutare a ridurre "jank" o discontinuità nell'interfaccia utente. Se i dati vengono caricati in modo asincrono, l'interfaccia utente può essere aggiornata in modo incrementale man mano che l'app riceve i dati. Questo può rendere l'esperienza utente più fluida.

In terzo luogo, le schermate scheletro possono fornire una migliore esperienza utente se i dati vengono caricati da una connessione lenta o inaffidabile. Se i dati vengono recuperati da un server remoto, è possibile che la connessione sia lenta o interrotta. In questi casi, può essere utile mostrare una schermata scheletrica in modo che gli utenti sappiano che i dati vengono caricati, anche se ci vuole un po' di tempo.

Come implementare uno scheletro in Next.js

Ci sono alcuni modi per implementare schermate scheletro in Next.js. È possibile utilizzare le funzionalità integrate per ricreare manualmente una semplice schermata scheletro. Oppure puoi usare una libreria come reagire-caricamento-scheletro o l'interfaccia utente materiale per fare il lavoro per te.

Metodo 1: utilizzo delle funzionalità integrate

In Next.js, puoi usare diversi ganci React e condizioni semplici per mostrare gli schermi scheletrici. Puoi usare il && prop per il rendering condizionale degli schermi scheletrici.

importare {useState, useEffect} da 'reagire';
funzioneIl mio componente() {
cost [isLoading, setIsLoading] = useState(VERO);


usaEffetto(() => {
 setTimeout(() => setIsLoading(falso), 1000);
 }, []);


ritorno (
<div>
 {è in caricamento && (
<div>
 Caricamento...
</div>
 )}
 {!è in caricamento && (
<div>
 Il mio contenuto componente.
</div>
 )}
</div>
 );
}
esportarepredefinito Il mio componente;

Il codice precedente utilizza il useState hook per tenere traccia del caricamento dei dati (isLoading). Utilizza il useEffect hook per simulare il caricamento dei dati in modo asincrono. Infine, utilizza il && operatore per eseguire il rendering condizionale dello scheletro dello schermo o del contenuto del componente.

Questo metodo non è l'ideale, perché richiede l'impostazione manuale del file isLoading state e simulare il caricamento dei dati. Tuttavia, è un modo semplice per implementare una schermata scheletro in Next.js.

Metodo 2: utilizzo di una libreria come "React-Loading-Skeleton"

Un altro modo per implementare le schermate di scheletro è utilizzare una libreria come reagire-caricamento-scheletro. react-loading-skeleton è un componente React che puoi utilizzare per creare schermate scheletro. Ha un componente che puoi avvolgere attorno a qualsiasi elemento dell'interfaccia utente.

Per usare react-loading-skeleton, devi installarlo usando npm.

npm reagisco-caricando-scheletro

Una volta installato, puoi importarlo nella tua app Next.js e usarlo in questo modo:

importare Reagire da 'reagire';
importare Scheletro da 'reagire-caricando-scheletro';
importare 'react-loading-skeleton/dist/skeleton.css'
cost Applicazione = () => {
ritorno (
<div>
<Scheletro />
<h3>Secondo schermo</h3>
<Altezza scheletro={40} />
</div>
 );
};
esportarepredefinito Applicazione;

Il codice precedente importa il file Scheletro componente dalla libreria react-loading-skeleton. Quindi lo utilizza per creare due schermi scheletrici. Utilizza il altezza prop per impostare l'altezza dello scheletro dello schermo. Ora puoi utilizzare il rendering condizionale per rendere il componente solo quando i dati sono presenti.

Metodo 3: utilizzo dell'interfaccia utente materiale

Se utilizzi l'interfaccia utente materiale nella tua app Next.js, puoi utilizzare il file componente dal @mui/materiale biblioteca. IL componente dall'interfaccia utente materiale ha alcuni oggetti di scena che puoi utilizzare per personalizzare lo schermo dello scheletro.

Per usare il componente da Material UI, devi prima installarlo usando npm:

installazione npm @mui/material

Una volta installato, puoi importarlo nella tua app Next.js e usarlo in questo modo:

importare Reagire da 'reagire';
importare Scheletro da '@mui/materiale/Scheletro';
cost Applicazione = () => {
ritorno (
<div>
<Variante scheletro="retto" larghezza={210} altezza={118} />
<h3>Secondo schermo</h3>
<Variante scheletro="testo" />
</div>
 );
};
esportarepredefinito Applicazione;

Il codice precedente importa il file Scheletro componente dal @material-ui/lab biblioteca. Quindi crea due schermate scheletriche. IL variante prop imposta il tipo di schermo scheletro. IL larghezza E altezza gli oggetti di scena definiscono le dimensioni dello scheletro dello schermo.

Puoi anche aggiungere diverse animazioni ai tuoi schermi scheletrici. L'interfaccia utente del materiale ha alcune animazioni integrate che puoi utilizzare. Ad esempio, puoi utilizzare il animare prop per aggiungere un'animazione in dissolvenza ai tuoi schermi scheletrici:

importare Reagire da 'reagire';
importare Scheletro da '@mui/materiale/Scheletro';
cost Applicazione = () => {
ritorno (
<div>
<Variante scheletro="retto" larghezza={210} altezza={118} />
<h3>Secondo schermo</h3>
<Variante scheletro="testo" animato="onda" />
</div>
 );
};
esportarepredefinito Applicazione;

Aggiungendo il animare prop ad a componente, puoi incorporare il movimento visivo nella tua interfaccia utente. IL onda Il valore aggiunge un'animazione ondeggiante allo schermo dello scheletro. Ora puoi usare il rendering condizionale per mostrare il contenuto dopo lo scheletro dello schermo.

Migliora l'esperienza utente con gli schermi Skeleton

Schermi scheletro possono essere un ottimo modo per migliorare l'esperienza utente della tua app Next.js. Possono aumentare la velocità percepita, ridurre il disturbo e offrire un'esperienza migliore quando i dati viaggiano su una connessione lenta o instabile.

Qualunque sia il metodo scelto per aggiungere schermate scheletro, sono un ottimo modo per migliorare l'esperienza utente della tua app Next.js.