Centrémonos en la implementación de un componente de reserva. Este paso es fundamental para mejorar la experiencia del usuario al proporcionar retroalimentación visual mientras se cargan páginas web específicas.

React proporciona el componente Suspense para este propósito. El componente Suspense permite especificar un componente de reserva que se muestra mientras el contenido principal se está cargando. A continuación se muestra la sintaxis para implementar esta funcionalidad:

import { Suspense } from "react";

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

• Línea 1: Se importa el componente Suspense de la biblioteca de React;
• Líneas 5 y 7: Se envuelven todas las rutas de la aplicación con el componente Suspense. Esto permite mostrar un componente de reserva mientras se carga cualquier ruta;
• Línea 5: El componente Suspense acepta una propiedad fallback. En este caso, la propiedad fallback se establece en <LoaderComponent />, lo que especifica el contenido que se mostrará mientras se carga el contenido principal.

Ejemplo

Ahora, integremos un mecanismo de reserva en nuestra aplicación:

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>
    </>
  );
};

El código proporcionado demuestra la integración de un mecanismo de reserva dentro del componente App. Utilizando el componente Suspense con una propiedad fallback especificada como <Loader />, se garantiza que se muestre retroalimentación visual mientras se cargan las rutas.