Afficher un état de chargement

Quand le catalogue attend une réponse du serveur, la page peut rester un instant sans contenu visible. Vous allez ajouter un message temporaire pour que la personne sache que sa demande est en cours.

Cette leçon concerne uniquement le chargement de la route du catalogue. Vous conservez la recherche par difficulté et la lecture des données côté serveur déjà mises en place ; le changement porte sur le retour affiché pendant l’attente.

Créer l’état de chargement du catalogue

Dans l’App Router, Next.js reconnaît le fichier `loading.tsx` associé à une route et peut afficher son contenu pendant que celle-ci attend ses données. Ajoutez le fichier `app/loading.tsx` à côté de `app/page.tsx`. Il doit exporter par défaut un composant React qui retourne un contenu temporaire.

export default function Loading() {
  return (
    <p className="rando-etat" role="status">
      Chargement des randonnées…
    </p>
  );
}

Le composant n’accède à aucune donnée et ne modifie pas `app/page.tsx`. Next.js l’utilise comme interface de remplacement pendant que la page du catalogue se prépare, puis affiche la page lorsque son rendu est disponible. Le texte indique clairement ce qui est en cours, et `role="status"` permet aux technologies d’assistance de signaler ce changement d’état.

Vérifier le comportement

Lancez le projet et ouvrez la route du catalogue. Pour observer l’état temporaire, vous pouvez ralentir le réseau dans les outils de développement du navigateur ; dès que la réponse du serveur arrive, le message disparaît au profit du contenu de la page.

• Pendant l’attente, le message « Chargement des randonnées… » apparaît.
• Une fois les données reçues, le catalogue remplace ce message.
• La recherche par difficulté continue de fonctionner comme auparavant.

À retenir

• Le fichier `app/loading.tsx` fournit l’interface temporaire de chargement du catalogue.
• Next.js affiche cet état pendant que la page attend ses données, puis le remplace par le contenu rendu.
• L’état utilise la classe autorisée `rando-etat` et annonce son statut avec `role="status"`.
• Un chargement n’est ni un résultat vide ni une erreur ; les états correspondants seront abordés ensuite.

Dans la prochaine leçon, vous ajouterez une interface dédiée pour traiter les erreurs de la route du catalogue.