Vamos focar na implementação de um componente de fallback. Esta etapa é fundamental para aprimorar a experiência do usuário, fornecendo um feedback visual enquanto páginas específicas da web estão sendo carregadas.

O React oferece o componente Suspense para esse propósito. O componente Suspense permite especificar um componente de fallback que é exibido enquanto o conteúdo principal está sendo carregado. Veja a sintaxe para implementar esse recurso:

import { Suspense } from "react";

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

• Linha 1: Importação do componente Suspense da biblioteca React;
• Linhas 5 e 7: Todos os caminhos de rotas do aplicativo são envolvidos pelo componente Suspense. Isso permite exibir um componente de fallback enquanto qualquer rota está sendo carregada;
• Linha 5: O componente Suspense aceita a propriedade fallback. Neste caso, a propriedade fallback está definida como <LoaderComponent />, que especifica o conteúdo a ser exibido enquanto o conteúdo principal está sendo carregado.

Exemplo

Agora, vamos integrar um mecanismo de fallback em nosso aplicativo:

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

O código fornecido demonstra a integração de um mecanismo de fallback dentro do componente App. Utilizando o componente Suspense com a propriedade fallback definida como <Loader />, garantimos que o feedback visual seja exibido enquanto as rotas estão sendo carregadas.