Concentrons-nous sur la mise en œuvre d’un composant de repli. Cette étape est essentielle pour améliorer l’expérience utilisateur en fournissant un retour visuel pendant le chargement de certaines pages web.

React propose le composant Suspense à cet effet. Le composant Suspense permet de spécifier un composant de repli qui s’affiche pendant le chargement du contenu principal. Voici la syntaxe pour implémenter cette fonctionnalité :

import { Suspense } from "react";

const App = () => {
  return (
    <Suspense fallback={<LoaderComponent />}>
      {/* Routes */}
    </Suspense>
  );
};

• Ligne 1 : Importation du composant Suspense depuis la bibliothèque React ;
• Lignes 5 et 7 : Tous les itinéraires de l’application sont englobés dans le composant Suspense. Cela permet d’afficher un composant de repli pendant le chargement de n’importe quelle route ;
• Ligne 5 : Le composant Suspense accepte une propriété fallback. Dans ce cas, la propriété fallback est définie sur <LoaderComponent />, ce qui précise le contenu à afficher pendant le chargement du contenu principal.

Exemple

Intégration d’un mécanisme de repli dans notre application :

import React, { Suspense, lazy } from "react";
import { Routes, Route } from "react-router-dom";
import Loader from "../Loader/Loader";

const HomePage = lazy(() => import("../HomePage/HomePage"));
const AboutPage = lazy(() => import("../AboutPage/AboutPage"));
const ContactsPage = lazy(() => import("../ContactsPage/ContactsPage"));

const App = () => {
  return (
    <>
      <Suspense fallback={<Loader />}>
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/about" element={<AboutPage />} />
          <Route path="/contacts" element={<ContactsPage />} />
        </Routes>
      </Suspense>
    </>
  );
};

Le code fourni illustre l’intégration d’un mécanisme de repli dans le composant App. En utilisant le composant Suspense avec une propriété fallback définie sur <Loader />, un retour visuel est assuré pendant le chargement des routes.