Le chargement des interfaces utilisateur et des éléments visuels sont des composants importants dans les applications Web et mobiles; ils jouent un rôle central dans l’amélioration de l’expérience et de l’engagement des utilisateurs. Sans ces signaux, les utilisateurs pourraient devenir perplexes et incertains quant au bon fonctionnement de l'application, si elles ont déclenché les bonnes actions ou si leurs actions sont en cours de traitement.

En fournissant aux utilisateurs divers repères visuels indiquant le traitement en cours, vous pouvez atténuer efficacement toute forme d’incertitude et de frustration, les dissuadant finalement de quitter prématurément l’application.

Impact du chargement des interfaces utilisateur sur les performances et l'expérience utilisateur

Les dix heuristiques de Jakob Nielsen pour la conception d’interfaces utilisateur soulignent l’importance de garantir que l’état actuel du système soit visible pour les utilisateurs finaux. Ce principe met en évidence la nécessité de composants d'interface utilisateur tels que les interfaces utilisateur de chargement et autres interfaces utilisateur de feedback. éléments pour fournir rapidement aux utilisateurs des commentaires appropriés sur les processus en cours et dans les délais requis. laps de temps.

Le chargement des interfaces utilisateur joue un rôle central dans l’élaboration des performances globales et de l’expérience utilisateur des applications. Du point de vue des performances, la mise en œuvre d'écrans de chargement efficaces peut améliorer considérablement la vitesse et la réactivité d'une application Web.

Idéalement, l'utilisation efficace des interfaces utilisateur de chargement permet un chargement de contenu asynchrone: cela évite que la page entière ne se fige pendant que des composants spécifiques se chargent en arrière-plan; essentiellement, créant une expérience de navigation plus fluide.

De plus, en offrant une indication visuelle claire des processus en cours, les utilisateurs sont plus susceptibles d'attendre patiemment la récupération du contenu.

Premiers pas avec React Suspense dans Next.js 13

Le suspense est un composant React qui gère les opérations asynchrones exécutées en arrière-plan, telles que la récupération de données. En termes simples, ce composant vous permet de restituer un composant de secours jusqu'à ce que le composant enfant prévu monte et charge les données requises.

Voici un exemple du fonctionnement de Suspense. Supposons que vous disposiez d'un composant qui récupère les données d'une API.

exportdefaultfunctionTodos() {
const data = fetchData() {
//fetch data...
return data;
 };
return<h1> {data.title} h1>
}
// the fallback component
exportdefaultfunctionLoading() {
return<p>Loading data ...p> }

Suspense affichera le Chargement composant jusqu'à ce que le contenu du Toutes les tâches Le composant termine son chargement et est prêt pour le rendu. Voici la syntaxe Suspense pour y parvenir :

import { Suspense } from'react';
functionApp() {
return (
 <>
}>

 </Suspense>
 </>
 );}

Next.js 13 prend en charge React Suspense

Next.js 13 a ajouté la prise en charge de Suspense via sa fonctionnalité de répertoire d'applications. Essentiellement, travailler avec le répertoire d'applications vous permet d'inclure et d'organiser des fichiers de page pour un itinéraire particulier dans un dossier dédié.

Dans ce répertoire de routes, vous pouvez inclure un chargement.js fichier, que Next.js utilisera ensuite comme composant de secours pour afficher l'interface utilisateur de chargement avant de restituer le composant enfant avec ses données.

Maintenant, intégrons React Suspense dans Next.js 13 en créant une application de démonstration To-Do.

Vous pouvez trouver le code de ce projet dans son GitHub dépôt.

Créer un projet Next.js 13

Vous allez créer une application simple qui récupère une liste de tâches à partir du API facticeJSON point final. Pour commencer, exécutez la commande ci-dessous pour installer Next.js 13.

npx create-next-app@latest next-project --experimental-app

Définir un itinéraire Todos

À l'intérieur de src/application répertoire, créez un nouveau dossier et nommez-le Toutes les tâches. Dans ce dossier, ajoutez un nouveau page.js fichier et incluez le code ci-dessous.

asyncfunctionTodos() {
asyncfunctionfetchTodos() {
let res = await fetch("https://dummyjson.com/todos");
const todosData = await res.json();
return todosData
 }
const {todos} = await fetchTodos();
asyncfunctionwait(ms) {
returnnewPromise(resolve => setTimeout(resolve, ms));
 }
await wait(3000); 
return (
 <> 

"todo-container">
"todo-list">
 {todos.slice(0, 10).map((todo) => (


"todos">

<h2>{todo.todo}h2> </li>
 </div>
 </ul>
 ))}
 </div>
 </div>
 </>
 );




}
exportdefault Todos;

La fonction asynchrone, Toutes les tâches, récupère une liste de tâches à partir de l'API DummyJSON. Il mappe ensuite le tableau des tâches récupérées pour afficher une liste de tâches sur la page du navigateur.

De plus, le code inclut un asynchrone attendez fonction qui simule un délai, créant un scénario qui permettra à un utilisateur de voir une interface utilisateur de chargement pendant une durée spécifique avant d'afficher les tâches récupérées.

Dans un cas d'utilisation plus réaliste; au lieu de simuler un retard, des situations telles que des activités de traitement au sein d'applications, la récupération de données dans des bases de données, consommer les API, ou même des temps de réponse lents de l'API entraîneraient de brefs retards.

Intégrer React Suspense dans l'application Next.js

Ouvrez le app/layout.js et mettez à jour le code standard Next.js avec le code suivant.

import React, { Suspense } from'react';
import Loading from'@/app/Todos/loading';
exportconst metadata = {
 title: 'Create Next App',
 description: 'Generated by create next app',
}
exportdefaultfunctionRootLayout({ children }) {
return (
"en">

}>
 {children}
 </Suspense>
 </body>
 </html>
 )
}

Le app/layout.js dans Next.js 13 sert de composant de mise en page central qui définit la structure globale et le comportement de la mise en page de l'application. Dans ce cas, en passant le enfants soutenir le Le suspense composant, garantit que la mise en page devient un wrapper pour l'ensemble du contenu de l'application.

Le Le suspense Le composant affichera le Chargement composant comme solution de secours pendant que les composants enfants chargent leur contenu de manière asynchrone; indiquant à l'utilisateur que le contenu est récupéré ou traité en arrière-plan.

Mettre à jour le fichier de route d'origine

Ouvrez le app/page.js fichier, supprimez le code standard Next.js et ajoutez le code ci-dessous.

import React from'react';
import Link from"next/link";
functionHome () {
return (



Next.js 13 React Suspense Loading Example</h1>
"/Todos">Get Todos</Link>
 </div>
 </main>
 )
}
exportdefault Home;

Créez le fichier chargement.js

Enfin, allez-y et créez un chargement.js fichier à l'intérieur du application/Tous annuaire. Dans ce fichier, ajoutez le code ci-dessous.

exportdefaultfunctionLoading() {
return<p>Loading data ...p> }

Ajout de spinners modernes au composant de chargement de l'interface utilisateur

Le composant d'interface utilisateur de chargement que vous avez créé est très basique; vous pouvez éventuellement choisir d'ajouter des écrans squelettes. Vous pouvez également créer et styliser des composants de chargement personnalisés en utilisant Tailwind CSS dans votre application Next.js. Ensuite, ajoutez des animations de chargement conviviales comme les spinners fournis par des packages tels que Réagissez les fileurs.

Pour utiliser ce package, installez-le dans votre projet.

npm install react-loader-spinner --save

Ensuite, mettez à jour votre chargement.js déposer comme suit :

"use client"
import { RotatingLines} from'react-loader-spinner'
functionLoading() {
return (



Loading the Todos ...</p> 
 strokeColor="grey"
 strokeWidth="5"
 animationDuration="0.75"
 width="96"
 visible={true}
 />
 </div>
 );
}
exportdefault Loading;

Désormais, l'interface utilisateur de chargement affichera un message de chargement et rendra une animation de rotation de lignes rotatives pour indiquer le traitement en cours lors de la récupération des données Todos.

Améliorez l'expérience utilisateur avec le chargement des interfaces utilisateur

L'intégration d'interfaces utilisateur de chargement dans vos applications Web peut améliorer considérablement l'expérience utilisateur. En fournissant aux utilisateurs des repères visuels lors des opérations asynchrones, vous pouvez minimiser efficacement leurs inquiétudes et toute incertitude, et par conséquent maximiser leur engagement.