Si vous avez utilisé une application Web ou mobile, vous avez probablement vu un écran squelette. Ce périphérique d'interface utilisateur offre une expérience plus fluide lorsqu'une mise à jour dépend de la réception de données, ce qui peut prendre un certain temps pour arriver.

Découvrez exactement ce qu'est un écran squelette, pourquoi vous voudrez peut-être les utiliser dans votre application et comment les implémenter dans Next.js.

Qu'est-ce qu'un écran squelette ?

Un écran squelette est un élément de l'interface utilisateur qui indique que quelque chose est en cours de chargement. Il s'agit généralement d'un état vide ou "vide" d'un composant d'interface utilisateur, sans aucune donnée. Par exemple, si vous deviez charger une liste d'éléments à partir d'une base de données, l'écran squelette pourrait être une simple liste sans données, juste des éléments de boîte d'espace réservé.

De nombreux sites Web et applications utilisent des écrans squelettes. Certains les utilisent pour un état de chargement, tandis que d'autres les utilisent comme un moyen d'améliorer les performances perçues.

instagram viewer

Pourquoi utiliser un écran squelette ?

Il existe plusieurs raisons pour lesquelles vous pourriez vouloir utiliser un écran squelette dans votre application Next.js.

Premièrement, cela peut améliorer les performances perçues de votre application. Si les utilisateurs voient un écran vide pendant le chargement des données, ils peuvent supposer que l'application est lente ou ne fonctionne pas correctement. Cependant, s'ils voient un écran squelette, ils savent que les données sont en cours de chargement et que l'application fonctionne comme prévu.

Deuxièmement, les écrans squelettes peuvent aider à réduire le "jank" ou le saccade dans votre interface utilisateur. Si les données sont chargées de manière asynchrone, l'interface utilisateur peut se mettre à jour de manière incrémentielle au fur et à mesure que votre application reçoit des données. Cela peut rendre l'expérience utilisateur plus fluide.

Troisièmement, les écrans squelettes peuvent offrir une meilleure expérience utilisateur si les données sont chargées à partir d'une connexion lente ou peu fiable. Si des données sont extraites d'un serveur distant, il est possible que la connexion soit lente ou interrompue. Dans ces cas, il peut être utile d'afficher un écran squelette afin que les utilisateurs sachent que les données sont en cours de chargement, même si cela prend un certain temps.

Comment implémenter un écran squelette dans Next.js

Il existe plusieurs façons d'implémenter des écrans squelettes dans Next.js. Vous pouvez utiliser des fonctions intégrées pour recréer manuellement un écran squelette simple. Ou vous pouvez utiliser une bibliothèque comme réaction-chargement-squelette ou Material UI pour faire le travail pour vous.

Méthode 1: Utilisation des fonctionnalités intégrées

Dans Next.js, vous pouvez utiliser différents crochets React et des conditions simples pour afficher des écrans squelettes. Vous pouvez utiliser le && prop pour restituer conditionnellement les écrans squelettes.

importer {useState, useEffect} depuis 'réagir';
fonctionMonComposant() {
constante [isLoading, setIsLoading] = useState(vrai);


useEffet(() => {
 setTimeout(() => setIsLoading(FAUX), 1000);
 }, []);


retour (
<div>
 {est en cours de chargement && (
<div>
 Chargement...
</div>
 )}
 {!est en cours de chargement && (
<div>
 Contenu de mon composant.
</div>
 )}
</div>
 );
}
exporterdéfaut MonComposant ;

Le code ci-dessus utilise le useState crochet pour savoir si les données sont en cours de chargement (est en cours de chargement). Il utilise le utiliserEffet crochet pour simuler le chargement de données de manière asynchrone. Enfin, il utilise le && opérateur pour restituer conditionnellement l'écran squelette ou le contenu du composant.

Cette méthode n'est pas idéale, car elle nécessite de régler manuellement le est en cours de chargement état et simulation du chargement des données. Cependant, c'est un moyen simple d'implémenter un écran squelette dans Next.js.

Méthode 2: Utiliser une bibliothèque comme « React-Loading-Skeleton »

Une autre façon d'implémenter des écrans squelettes consiste à utiliser une bibliothèque comme réaction-chargement-squelette. react-loading-skeleton est un composant React que vous pouvez utiliser pour créer des écrans squelettes. Il a un composant que vous pouvez envelopper autour de n'importe quel élément de l'interface utilisateur.

Pour utiliser react-loading-skeleton, vous devez l'installer en utilisant npm.

npm je réagis-chargement-squelette

Une fois installé, vous pouvez l'importer dans votre application Next.js et l'utiliser comme ceci :

importer Réagir depuis 'réagir';
importer Squelette depuis 'react-loading-skeleton';
importer 'réaction-chargement-squelette/dist/squelette.css'
constante Application = () => {
retour (
<div>
<Squelette />
<h3>Deuxième écran</h3>
<Hauteur du squelette={40} />
</div>
 );
};
exporterdéfaut application ;

Le code ci-dessus importe le Squelette composant de la bibliothèque react-loading-skeleton. Il l'utilise ensuite pour créer deux écrans squelettes. Il utilise le hauteur prop pour définir la hauteur de l'écran squelette. Maintenant vous pouvez utiliser le rendu conditionnel pour rendre le composant uniquement lorsque les données sont présentes.

Méthode 3: Utilisation de l'interface utilisateur matérielle

Si vous utilisez Material UI dans votre application Next.js, vous pouvez utiliser le composant de la @mui/matériel bibliothèque. Le Le composant de Material UI a quelques accessoires que vous pouvez utiliser pour personnaliser l'écran squelette.

Pour utiliser le composant de Material UI, vous devez d'abord l'installer à l'aide de npm :

installation npm @mui/material

Une fois installé, vous pouvez l'importer dans votre application Next.js et l'utiliser comme ceci :

importer Réagir depuis 'réagir';
importer Squelette depuis '@mui/matériel/Squelette' ;
constante Application = () => {
retour (
<div>
<Variante squelette="rectifier" largeur={210} hauteur={118} />
<h3>Deuxième écran</h3>
<Variante squelette="texte" />
</div>
 );
};
exporterdéfaut application ;

Le code ci-dessus importe le Squelette composant de la @matériel-ui/lab bibliothèque. Il crée ensuite deux écrans squelettes. Le une variante prop définit le type d'écran squelette. Le largeur et hauteur les accessoires définissent les dimensions de l'écran squelette.

Vous pouvez également ajouter différentes animations à vos écrans squelettes. Material UI a quelques animations intégrées que vous pouvez utiliser. Par exemple, vous pouvez utiliser le animer prop pour ajouter une animation de fondu à vos écrans squelettes :

importer Réagir depuis 'réagir';
importer Squelette depuis '@mui/matériel/Squelette' ;
constante Application = () => {
retour (
<div>
<Variante squelette="rectifier" largeur={210} hauteur={118} />
<h3>Deuxième écran</h3>
<Variante squelette="texte" animer ="vague" />
</div>
 );
};
exporterdéfaut application ;

En ajoutant le animer soutenir un composant, vous pouvez incorporer un mouvement visuel dans votre interface utilisateur. Le vague value ajoute une animation ondulante à l'écran squelette. Vous pouvez maintenant utiliser le rendu conditionnel pour afficher le contenu après l'écran squelette.

Améliorez l'expérience utilisateur avec les écrans squelettes

Les écrans squelettes peuvent être un excellent moyen d'améliorer l'expérience utilisateur de votre application Next.js. Ils peuvent augmenter la vitesse perçue, réduire les secousses et offrir une meilleure expérience lorsque les données transitent via une connexion lente ou instable.

Quelle que soit la méthode que vous choisissez pour ajouter des écrans squelettes, ils constituent un excellent moyen d'améliorer l'expérience utilisateur de votre application Next.js.