Écrans squelettes pour les applications React

Voyons pourquoi les écrans squelettes (aperçus filaires) sont un meilleur indicateur de charge que les anciens spinners habituels, puis voyons comment les ajouter.

Dans cet article, nous allons en savoir plus sur le chargement du contenu. être gérée correctement dans les applications modernes et pourquoi les écrans squelettes peuvent être la meilleure alternative pour cela.

La communication est la clé du succès des applications modernes de nos jours. Chaque entreprise doit montrer correctement le contenu à ses utilisateurs pour avoir plus de succès – cela fait une différence totale pour les utilisateurs et à l'avenir.

Mais montrer le contenu correctement n'est pas seulement la seule chose que vous devriez faire pour Améliorez votre communication avec votre utilisateur et améliorez leur expérience finale.

Chargement du contenu et de l'expérience utilisateur

Le chargement des fileurs a toujours été la principale alternative pour le chargement des écrans. Ils sont faciles à utiliser, il existe de nombreux packages et icônes différents disponibles dans la communauté et tout le monde sait exactement ce que cela signifie lorsque nous voyons un spinner de chargement.

Le problème est que le chargement de spinners crée la sensation de chargement lent. Un spinner de chargement ne maintient pas l'utilisateur engagé. Cela s'écarte de la perception de l'utilisateur sur la façon dont le contenu va être affiché et crée parfois un sentiment de frustration.

Bill Chung a mené des recherches très complexes et importantes sur les écrans squelettes et a remarqué que les écrans squelettes, en fait, sont perçus comme étant de durée plus courte par rapport à un écran vide ou à une molette de chargement.

L'une des clés du succès est de garder les utilisateurs engagés pendant le chargement du contenu, et c'est pourquoi les écrans meilleure alternative pour montrer que le contenu est en cours de chargement dans votre application.

Un écran squelette est un espace réservé de chargement qui affiche un aperçu filaire non interactif similaire au contenu en cours de chargement, montrant les zones où le texte et les images seront chargés une fois

Les écrans squelettes maintiennent l'utilisateur engagé et contribuent à réduire la frustration liée au temps de chargement. L'utilisateur crée une perception précise de la façon dont le contenu va être affiché avant même qu'il ne soit chargé.

[19659003] Les écrans squelettes sont partout sur le Web maintenant, utilisés par de nombreuses grandes entreprises telles que Facebook, Medium, YouTube, etc.

Nous allons maintenant implémenter des écrans squelettes dans une application React et voir comment cela aide nos utilisateurs pour rester plus engagé et moins frustré.

Squelettes dans React Apps

Il existe de nombreux packages d'écran squelette différents qui peuvent être utilisés dans React. Chacun d'eux utilise une approche différente, donc dans cet article, nous allons utiliser l'un des meilleurs et des plus intuitifs packages pour les écrans squelettes de React.

Nous allons utiliser le react-loading-skeleton package créé par David Tang . L'un des principaux avantages de ce package est qu'il adapte l'écran squelette aux styles de votre contenu. Contrairement aux autres packages disponibles, en utilisant ce package, vous n'avez pas besoin de créer un écran squelette avec la taille exacte que vous souhaitez utiliser – le composant remplira automatiquement les tailles correctes.

Commençons par création d'une nouvelle application à l'aide de Create React App :

 npx create-react-app skeleton-react

Nous allons maintenant installer le package react-loading-skeleton :

 yarn add react-loading-skeleton

Nous allons créer une application simple qui fait une requête à API Chuck Norris . Chaque fois que nous rechargerons notre application, nous ferons une nouvelle demande et mettrons à jour nos données d'état.

Commençons par créer un composant appelé Joke . À l'intérieur de ce composant, nous utiliserons notre écran squelette. Tout d'abord, importons quelques éléments que nous allons utiliser:

 import  React  from   'react' ; 
 import  Skeleton  from   ] 'squelette de chargement de réaction' ; 

Le composant Joke recevra trois accessoires: joke loading et getNewJoke . La blague sera la blague que nous recevrons de l'API; le prop loading est une valeur booléenne pour vérifier si la blague est en cours de chargement; et la fonction getNewJoke sera chargée d'obtenir une nouvelle blague de l'API pour nous.

 const   Joke   =   ( { joke  ] chargement  getNewJoke } )   =>   {
   return   (
     ... 
  ) [19659044]} 

Rappelez-vous que le package react-loading-skeleton ne nous oblige pas à créer un écran squelette avec la taille spécifique de nos composants? Tout ce que nous avons à faire est d'afficher le composant Skeleton pendant le chargement de notre contenu.

Nous allons donc créer un h1 pour notre id un img pour notre image et une autre h1 pour notre valeur .

 < h1 >  {loading?  < Squelette   /> : joke.id}  </  h1 > 
{chargement ?  < Squelette   /> :  < img   src  =  {joke.icon_url}   hauteur  = [19659027] ' 60px '   width  =  ' 60px '    /> }
 < h1 >  {chargement?  < Skeleton   /> : joke.value}  </  h1 > 

Nous aurons également un bouton et passerons notre fonction getNewJoke comme méthode onClick donc chaque fois que nous cliquons dessus, cela nous apportera une nouvelle blague.

 < button   onClick  =  {getNewJoke} >  Get bloke  </  button > 

Voici à quoi ressemblera notre composant Joke :

 import  React  from   'react' ; 
 import  Skeleton  from   'react-loading-skeleton' ; 

 const   Joke   =   ( { bloke  chargement  getNewJoke } )   =>   {
   return   (
     < div > 
       <  h1 >  { chargement ?   < Skeleton  / >  :  joke .  ] id }  < /  h1 > 
 { loading ?   < Skeleton  / >  :   < img src  =  { blague .  icon_url }  hauteur  =  '60px « widt h  =  '60px'   / > } 
       < h1 >  { chargement ?   < Skeleton  / >  :  joke .  value }  < /  h1 > [19659104] < button onClick  =  { getNewJoke } >  Get bloke  < /  button > [19659042] < /  div > 
  ) 
} 
 export   default  Joke ; 

Maintenant que notre composant Joke est prêt, nous allons travailler sur notre composant App . Tout d'abord, importez notre composant Joke .

Nous devons maintenant créer notre État. Nous aurons un état blague qui sera un objet et un état booléen loading .

 const   [ joke  setJoke ]   =   useState  ( {} ) ; 
 const   [ loading  setLoading ]   =   useState  ( false ) ; 

Créez une nouvelle fonction appelée getNewJoke . Dans cette fonction, nous allons faire une nouvelle requête à l'API Chuck Norris et enregistrer la réponse à notre état.

 const   getNewJoke   =   () [19659034] =>   {
   setLoading  ( true ) ; 
   fetch  ( 'https://api.chucknorris.io/jokes /random'[19659027Often)[19659175[19659176puis]) 
    .  puis  ( data  =>   {
       const   { icon_url  id  ,  value }   =  data ; 
       setJoke  ( { icon_url  id  valeur } ) ; 
       setLoading  ( false ) ; 
    } ) ; 
 } 

Notez que nous définissons notre état de chargement sur vrai au début de la fonction. Après avoir défini notre état blague nous remettons l'état loading à faux.

Nous utiliserons le crochet useEffect pour garantir que chaque fois que notre composant est re-rendu nous obtenons une nouvelle blague en appelant la fonction getNewJoke à l'intérieur du crochet, comme ceci:

 useEffect  ( ()   => [19659035] {
   getNewJoke  () ; 
}   [] ) ; 

Il ne nous reste plus qu'à passer notre composant Joke dans notre composant App, et l'ensemble de notre composant App va ressembler à ceci:

 import  React   { useEffect  useState }   from   'react' ; 
 import  Joke  from   "./ Joke"  ; 

 const   App   =   ()   =>   {
   const   [ bloke  setJoke ]   =   useState  ( {} ) ; 
   const   [ loading  setLoading ]   =   useState  ( false ) ; 

   const   getNewJoke   =   ()   =>   {
     setLoading  ( true ) ; 
     fetch  ( 'https: //api.chucknorr is.io/jokes/random'[19659027[/19659270)[ json  ([19659027]) ) 
      .  puis  ( data  =>   {
         const   { icon_url  id  value }   =  data ; 
         setJoke  ( { icon_url  id  valeur } ) ; 
         setLoading  ( false ) ; 
      } ) ) [19659027]; 
  } 

   useEffect  ( ()   =>   {
     getNewJoke  () ; 
   }   [] ) ; 

   return   (
     < div > 
       < Joke bloke  =  { blague }  chargement  = [19659027] { chargement }  getNewJoke  =  { getNewJoke }   / > 
     < /  div > 
  ) ; 
} 
 export   default  App ; 

Nous avons maintenant une application avec un squelette écran package react-loading-skeleton . Tout ce que nous avions à faire était d'utiliser le composant Skeleton et le package remplissait automatiquement les bonnes tailles pour nous.

Lorsque vous utilisez l'écran squelette, nous devons faire attention à ne pas l'utiliser partout dans notre application et diminuer notre expérience utilisateur. Cela n'a pas de sens d'utiliser un écran squelette dans les composants dont le contenu ne sera pas modifié, comme des boutons ou des icônes. Nous ne devrions l'utiliser que là où le contenu va réellement être mis à jour.

Conclusion

De nos jours, l'utilisation des filateurs de chargement devient obsolète. Cela crée un sentiment de frustration chez vos utilisateurs et peut donner l'impression que le contenu prend plus de temps à charger qu'il ne l'est en réalité. Les écrans squelettes peuvent être une solution très réactive et intuitive pour afficher un aperçu non interactif similaire à votre contenu pendant le chargement du contenu réel.