Les filateurs et les chargeurs sont traditionnellement le moyen de dire aux utilisateurs que le contenu va prendre un certain temps à charger. Bien que cette approche soit excellente, elle devient rapidement obsolète dans le développement moderne. Les écrans squelettes deviennent le remplacement parfait des chargeurs traditionnels car ils se concentrent sur la progression plutôt que sur les temps d'attente, ce qui réduit la frustration liée au temps de chargement.
Dans cet article, nous ne passerons pas en revue les bases de CSS React ou de la syntaxe JavaScript, vous n'avez donc pas besoin d'être un expert dans l'une ou l'autre de ces langues pour suivre.
Les experts de l'interface utilisateur et de l'expérience utilisateur nous apprennent que, pendant que les utilisateurs attendent que le contenu se charge sur une page, nous devons les maintenir engagés.
L'idée derrière l'utilisation de spinners pour engager les utilisateurs avant le chargement du contenu est excellente; cependant, le résultat peut être loin d'être idéal car la plupart des utilisateurs s'ennuieront à regarder un simulateur animé comme s'il s'agissait d'une horloge. Luke Wroblewski développe à ce sujet.
Les écrans squelettes offrent une meilleure expérience utilisateur en réduisant la frustration du temps de chargement. En se concentrant sur les progrès plutôt que sur les temps d'attente, cela crée l'illusion pour les utilisateurs que les informations seront affichées progressivement à l'écran. Bill Chung dans sa recherche le confirme .
Qu'est-ce qu'un écran squelette?
Un écran squelette est une version de l'interface utilisateur qui ne contient pas de contenu réel; au lieu de cela, il imite la mise en page de la page en montrant ses éléments sous une forme similaire au contenu réel au fur et à mesure qu'il se charge et devient disponible (c'est-à-dire lorsque la latence du réseau le permet).
Un écran squelette est essentiellement un filaire de la page, avec un espace réservé
Qu'est-ce qui est unique à propos d'un écran squelette?
Une interface utilisateur squelette ressemble à l'interface utilisateur réelle de la page, afin que les utilisateurs comprennent à quelle vitesse l'application Web ou mobile se chargera avant même que le contenu n'apparaisse. Voici quelques raisons pour lesquelles vous pourriez envisager d'utiliser des écrans squelettes dans votre prochain projet:
- imiter la mise en page d'une page est plus facile avec un écran squelette,
- le contenu se charge progressivement (pas tous en même temps).
Les écrans squelettes sont également appelés:
- éléments fantômes,
- espaces réservés de contenu,
- chargeurs de contenu.
Blockchain.com, YouTube, Facebook, Medium et d'autres grandes sociétés de technologie affichent des écrans squelettes pendant que leur contenu
Blockchain.com
Moyen
Typ es d'écrans squelettes
Il existe différents types d'écrans squelettes . Les principaux sont les espaces réservés de texte et les espaces réservés d'image (ou de couleur).
La plupart des développeurs préfèrent utiliser des espaces réservés de texte comme interface utilisateur squelette sur leurs pages car ils sont faciles à créer, et le développeur n'a pas besoin de détails sur le substance du contenu réel; au lieu de cela, le squelette imite l'interface utilisateur.
Les espaces réservés aux couleurs sont plus difficiles à créer car ils nécessitent des détails sur le contenu.
Certains packages populaires facilitent la mise en œuvre des écrans squelettes dans les applications Web. Examinons de plus près les deux:
Nous examinerons les avantages et les inconvénients de chaque package, avant de déterminer lesquels utiliser pour notre application.
React Placeholder
Avantages
- Les composants d'espace réservé sont utilisé pour créer une interface utilisateur squelette personnalisée.
- L'animation d'impulsion (c'est-à-dire l'effet de mouvement sur un élément) est prise en charge.
- Elle est fournie avec une API basée sur les composants.
Contre
- Les composants squelettes sont gérés séparément, donc la mise à jour des styles d'un composant nécessite peut-être également la mise à jour du composant squelette.
- La courbe d'apprentissage n'est pas linéaire car il existe plusieurs composants pour des besoins différents.
Ce qui suit est un exemple de composant squelette utilisant la réaction . -placeholder package:
import {TextBlock, RectShape} à partir de 'react-placeholder / lib / placeholders';
importer ReactPlaceholder depuis 'react-placeholder';
const GhostPlaceholder = () => (
);
<ReactPlaceholder ready = {ready} customPlaceholder = {}>
Importation TextBlock et RectShape de react-placeholder / lib / placeholder et ReactPlaceholder de react-placeholder ]nous avons créé un composant fonctionnel nommé GhostPlaceholder . GhostPlaceholder a un div, et à l'intérieur du div, nous avons utilisé le composant RectShape, qui décrit les dimensions d'un rectangle, transmet la valeur de n'importe quelle couleur et définit les styles du rectangle.
Ensuite, nous utilisé le composant TextBlock pour définir les valeurs des lignes et de la couleur. Le composant TextBlock définit le nombre de lignes et la couleur du texte.
Nous passons MyComponent en tant qu'enfant du composant ReactPlaceholder qui reçoit ready et le composant GhostPlaceholder en tant que valeurs pour ses ready et customPlaceholder accessoires.
Le MyComponent se chargera lorsque le l'interface utilisateur de l'écran du squelette est affichée.
Pour en savoir plus, consultez la documentation .
React Loading Skeleton
Pour
- Il est basé sur l'API et comporte un composant avec des accessoires pour toute personnalisation.
- Il peut être utilisé comme un composant squelette séparé et également directement à l'intérieur de n'importe quel composant, donc il est flexible.
- Il prend en charge le thème et l'animation par impulsions.
Contre
- Il est facile à mettre en œuvre pour un simple UI squelette, mais compliqué pour les squelettes plus complexes.
- Avoir un s séparé Le composant keleton rendra la maintenance plus difficile lorsque l'interface utilisateur et les styles changent.
Voici un exemple de React Loading Skeleton:
import Skeleton, {SkeletonTheme} de "react-loading-skeleton";
const SkeletonComponent = () => (
);
Nous avons importé Skeleton et SkeletonTheme de la bibliothèque react-loading-skeleton puis créé un composant fonctionnel qui rend le SkeletonTheme composant, avec couleur et hightlightColor comme propriétés.
Le composant SkeletonTheme est utilisé pour le thème (par exemple, pour ajouter des effets de couleur à l'interface utilisateur squelette).
Enfin, à l'intérieur de la section, nous définissons le composant Skeleton avec les propriétés de hauteur et de largeur et leurs valeurs appropriées transmises.
Création d'une interface utilisateur d'écran de type squelette de type YouTube
créer un écran squelette de type YouTube, à l'aide de React Loading Skeleton, pour montrer le fonctionnement d'une interface utilisateur squelette.
Configurer React
La manière la plus simple de configurer React consiste à utiliser Créer une application React qui est «un moyen officiellement pris en charge pour créer des applications React sur une seule page. Il offre une configuration de construction moderne sans configuration. »
Nous l’utiliserons pour amorcer l’application que nous allons créer. Depuis votre terminal, exécutez la commande ci-dessous:
npx create-react-app skeleton-screens && cd skeleton-screens
Une fois l'installation terminée, démarrez le serveur React en exécutant npm start :
Commençons par saisir des données factices YouTube. Les points d'extrémité réels seraient normalement utilisés à la place des données factices, mais dans ce didacticiel, nous utiliserons des données factices.
Créez un fichier dans votre dossier src / et nommez-le data.js ajoutez-y le code suivant.
const dummyData = [
{
section: "Recommended",
channel: "CNN",
items: [
{
id: "fDObf2AeAP4",
image: "https://img.youtube.com/vi/fDObf2AeAP4/maxresdefault.jpg",
title: "75 million Americans ordered to stay home",
views: "1.9M views",
published: "3 days agos"
},
{
id: "3AzIgAa0Cm8",
image: "https://img.youtube.com/vi/3AzIgAa0Cm8/maxresdefault.jpg",
title: "Gupta: The truth about using chloroquine to fight coronavirus pandemic",
views: "128K views",
published: "4 hours ago"
},
{
id: "92B37aXykYw",
image: "https://img.youtube.com/vi/92B37aXykYw/maxresdefault.jpg",
title: "Willie Jones STUNS Simon Cowell In Pitch Perfect Performance of 'Your Man'!",
views: "2.47 million views",
published: "1 month ago"
},
{
id: "J6rVaFzOEP8",
image: "https://img.youtube.com/vi/J6rVaFzOEP8/maxresdefault.jpg",
title: "Guide To Becoming A Self-Taught Software Developer",
views: "104K views",
published: "17 days ago"
},
{
id: "Wbk8ZrfU3EM",
image: "https://img.youtube.com/vi/Wbk8ZrfU3EM/maxresdefault.jpg",
title: "Tom Hanks and Rita Wilson test positive for coronavirus",
views: "600k views",
published: "1 week ago"
},
{
id: "ikHpFgKJax8",
image: "https://img.youtube.com/vi/ikHpFgKJax8/maxresdefault.jpg",
title: "Faces Of Africa- The Jerry Rawlings story",
views: "2.3 million views",
published: "2014"
}
]
},
{
section: "Dernières nouvelles",
chaîne: "CGTN America",
articles: [
{
id: "tRLDPy1A8pI",
image: "https://img.youtube.com/vi/tRLDPy1A8pI/maxresdefault.jpg",
title: "Is Trump blaming China for COVID-19? You decide.",
views: "876k views",
published: "9 days ago"
},
{
id: "2ulH1R9hlG8",
image: "https://img.youtube.com/vi/2ulH1R9hlG8/maxresdefault.jpg",
title: "Journalist still goes to office during pandemic, see her daily routine",
views: "873 views",
published: "3 hours ago"
},
{
id: "_TkfQ9MaIgU",
image: "https://img.youtube.com/vi/_TkfQ9MaIgU/maxresdefault.jpg",
title: "How are small businesses going to survive the economic downturn of the COVID-19 era?",
views: "283 views",
published: "4 day ago"
}
]
}
];
exporter les données factices par défaut;
Pour répliquer le format YouTube, nous avons créé des données factices qui ont un tableau d'objets, avec des propriétés telles que l'ID, l'image, le titre, le nombre de vues et la date de publication.
Ensuite, créons notre interface utilisateur YouTube. Nous aurons trois composants:
Carte |
Contient les détails de la vignette de la vidéo, le titre, le nombre de vues, la date de publication et la chaîne. |
CardList |
Renvoie toutes les cartes d'affilée. |
App |
Monte notre objet dummyData charge l'interface utilisateur du squelette pendant deux secondes et renvoie le composant CardList . |
Dans votre dossier src créez un dossier et nommez-le composants . Dans le dossier composants créez un fichier Card.js ajoutez-y le code suivant:
import React from "react";
const Card = ({item, channel}) => {
revenir (
{item.title}
{channel}
{item.views} • {item.published}
);
};
exporter la carte par défaut;
Nous avons créé un composant Card . À l'intérieur, nous avons importé React de react et nous avons déconstruit les item et channel accessoires pour qu'ils puissent être utilisés à travers Composant de la carte . Chaque composant d'élément Card qui affiche une vidéo affichera la miniature, le nombre de vues, la date de publication et le titre.
Composant CardList
À l'intérieur du dossier composants créez un dossier Fichier CardList.js et ajoutez-y le code suivant:
import React from "react";
importer la carte à partir de "./Card";
const CardList = ({list}) => {
revenir (
{list.items.map ((item, index) => {
retour ;
})}
);
};
exporter CardList par défaut;
Dans ce composant, nous avons importé le composant Card que nous avons créé. La carte accepte les éléments de canal et que nous obtenons en mappant à travers list.items . Nous exportons ensuite ce composant en tant que CardList car nous allons l'utiliser dans notre composant App .
Remarque : Les éléments tableau qui est mappé dans ce composant est le tableau d'objets de notre dummyData .
Composant d'application
À l'intérieur du fichier app.js dans le fichier src / supprimez le code qui s'y trouve et ajoutez-y ce qui suit:
import React, {useState, useEffect} de "react";
import "./App.css";
importer dummyData depuis "./data";
importer CardList depuis "./components/CardList";
const App = () => {
const [videos, setVideos] = useState ([]);
const [loading, setLoading] = useState (false);
useEffect (() => {
setLoading (true);
const timer = setTimeout (() => {
setVideos (dummyData);
setLoading (false);
}, 5000);
return () => clearTimeout (timer);
}, []);
revenir (
{
videos.map ((liste, index) => {
revenir (
{list.section}
);
})}
);
};
exporter l'application par défaut;
Dans ce composant, nous avons importé les crochets useState et useEffect aux côtés de React et les autres fichiers que nous avons créés et qui seront nécessaires. dans le composant App .
Parce que nos données sont des données factices, nous devons les simuler comme les données de l'API en chargeant le contenu après un délai de deux secondes, en utilisant le JavaScript [1945901048]. ] setTimeout méthode .
Ensuite, dans le composant App nous créons un état vidéo et définissons l'état sur un tableau vide à l'aide de useState . [19659005] Pour charger nos données fictives, nous utiliserons le crochet useEffect . Dans notre crochet, nous créons une minuterie variable qui contient la fonction setTimeout () . À l'intérieur de la fonction, nous définissons notre état vidéo sur notre objet dummyData et nous nous assurons que les données se chargent au bout de deux secondes, et, enfin, nous annulons le minuteur lors du démontage.
Enfin, nous mappons notre vidéo indique et renvoie l'élément de section qui contient la section de liste et le composant CardList avec ses accessoires de liste.
Ajout de CSS
Jusqu'à présent, nous avons utilisé beaucoup de classes sans CSS réel. Dans le dossier src supprimez tout dans App.css et remplacez-le par le code suivant:
.App {
largeur max: 960px;
marge: 0 auto;
taille de police: 16px;
}
.liste {
affichage: flex;
justifier-contenu: espace entre;
flex-wrap: wrap;
style liste: aucun;
rembourrage: 0;
}
.section titre {
margin-top: 30 pixels;
}
.carte {
largeur: calc (33% - 10px);
marge: 20px 0;
}
.card-link {
couleur: hériter;
décoration de texte: aucune;
}
.card-image {
largeur: 100%;
}
.channel-image {
rayon-frontière: 100%;
rembourrage: 0, 10px, 0, 0;
largeur: 40px;
hauteur: 40px;
}
.card-title {
margin-top: 10 pixels;
marge en bas: 0;
}
.card-channel {
margin-top: 5 pixels;
marge en bas: 5px;
taille de police: 14px;
}
/* Comprimés */
@media (largeur maximale: 1 000 pixels) {
.App {
largeur max: 600px;
}
.carte {
largeur: calc (50% - 22px);
}
}
/ * Mobiles * /
@media (largeur maximale: 640 pixels) {
.App {
largeur max: 100%;
rembourrage: 0 15px;
}
.carte {
largeur: 100%;
}
}
Voyons à quoi ressemble notre interface utilisateur YouTube sans l'écran squelette. Vous pouvez voir que lorsque la page se charge, un écran blanc apparaît pendant deux secondes, puis les données se chargent rapidement.
Utilisation de React Loading Skeleton
Contrairement aux autres bibliothèques dans lesquelles vous créeriez méticuleusement un écran squelette pour correspondre aux tailles de police, aux hauteurs de ligne et aux marges de votre contenu, le composant Skeleton est conçu pour être utilisé directement dans vos composants, à la place du contenu qui se charge.
Passons en revue quelques raisons pour lesquelles nous avons choisi React Loading Skeleton sur d'autres.
Thème
React Loading Skeleton prend en charge le thème . Ainsi, vous pouvez facilement changer les couleurs de tous les composants du squelette en utilisant SkeletonTheme et passer des valeurs aux accessoires de couleur .
Ci-dessous un exemple montrant comment cela fonctionne:
importer Skeleton, {SkeletonTheme} à partir de "react-loading-skeleton";
Durée
En plus de la hauteur largeur , et accessoires de couleur nous pouvons également spécifier une durée prop.
La durée par défaut est de 1.2 . Cela détermine le temps nécessaire pour effectuer un cycle de l'animation du squelette.
Pour en savoir plus, consultez la documentation .
Implémentation de l'interface utilisateur de l'écran du squelette
Maintenant, nous allons installer réagir-chargement-squelette . Exécutez la commande suivante dans votre terminal pour installer le package:
npm install react-loading-skeleton
Composant squelette
Créons un composant squelette pour nos données vidéo. Dans notre dossier composants créez un fichier SkeletonCard.js et ajoutez le code suivant:
import React from "react";
importer Skeleton à partir de "react-loading-skeleton";
const SkeletonCard = () => {
revenir (
{Tableau (9)
.remplir()
.map ((élément, index) => (
-
))}
);
};
exporter SkeletonCard par défaut;
Nous avons créé une liste non ordonnée. À l'intérieur, nous avons utilisé la méthode Array.fill () . Comme nous avons neuf éléments de données factices, nous avons utilisé la méthode Array.fill () pour parcourir la longueur de notre objet items et l'avons remplie sans valeur d'index, d'où rendant notre tableau vide . Consultez la documentation Array.fill pour en savoir plus sur le fonctionnement.
Ensuite, nous avons mappé notre tableau vide pour renvoyer une liste contenant les propriétés du squelette et nous avons spécifié la valeur de chacune des propriétés du squelette.
Ici, hauteur désigne la longueur d'un rectangle squelette et largeur fait référence à la largeur, tandis que le cercle crée la partie arrondie de l'interface utilisateur squelette.
React Loading Skeleton est livré avec une animation Pulse par défaut, ce qui le rend pratique. Vous pouvez créer une animation Pulse en fonction de votre projet, mais si vous me le demandez, je m'en tiendrai à la valeur par défaut.
Enfin, le code source complet est disponible .
Nous avons maintenant un système entièrement fonctionnel UI écran squelette. Notre exemple montre le squelette pendant cinq secondes avant d'afficher le contenu.
Voyons notre résultat jusqu'à présent:
Conclusion
Les écrans squelettes améliorent considérablement l'expérience utilisateur en évitant la frustration de faire face à un écran entièrement vierge et en donnant à l'utilisateur une impression de ce à quoi ressemblera le contenu avant son chargement.
Si vous n'êtes pas ' t à l'aise avec l'un des packages que nous avons examinés, vous pouvez créer votre propre interface utilisateur squelette en créant des rectangles et des cercles qui imitent la mise en page.
Veuillez partager vos commentaires et votre expérience dans la section commentaires ci-dessous. J'adorerais voir ce que vous proposez!
Le référentiel de soutien pour cet article est disponible sur Github .
Références
Source link