Implémenter le défilement infini

Le défilement infini charge davantage de contenu lorsque l’utilisateur s’approche du bas de la liste. L’implémentation la plus propre utilise IntersectionObserver : placez un élément « sentinel » à la fin de la liste et observez-le. Lorsque le sentinel entre dans la fenêtre d’affichage, récupérez la page suivante.

Ajoutez un <div> invisible (ou un espace réservé « chargement… ») après le dernier élément de la liste. Observez-le avec IntersectionObserver. Lorsqu’il entre en intersection, cela indique que l’utilisateur a fait défiler la page près du bas : il est temps de récupérer davantage de contenu.

Lors de l’intersection : récupérez la page suivante, affichez les nouveaux éléments et repositionnez le sentinel (il reste automatiquement à la fin de la liste si vous ajoutez les éléments avant lui). Il n’est pas nécessaire d’utiliser unobserve puis observe à nouveau : le sentinel est toujours observé.

Un indicateur booléen loading empêche l’empilement des requêtes si l’utilisateur fait défiler la page rapidement et déclenche plusieurs intersections avant l’arrivée de la première réponse. Sans cet indicateur, la même page est récupérée plusieurs fois et les éléments apparaissent en double.

Lorsque le serveur renvoie une page vide (ou indique qu’il n’y a « plus rien »), utilisez unobserve sur le sentinel et remplacez-le par un message de fin de liste. Les intersections suivantes ne déclenchent plus de récupérations ; l’utilisateur voit qu’il est arrivé à la fin.

Placez la récupération dans un bloc try/catch. En cas d’erreur, laissez loading = true afin que les nouvelles tentatives ne se déclenchent pas automatiquement ; affichez un bouton « Réessayer » qui réinitialise loading et relance le chargement. Sans cela, les défaillances réseau provoquent des tentatives répétées en boucle.

rootMargin: "500px" démarre la récupération suivante 500 pixels avant que l’utilisateur n’atteigne le sentinel. Ajustez cette valeur en fonction de la hauteur des éléments et de la vitesse moyenne de défilement : si elle est trop petite, les utilisateurs rencontrent le message « aucun contenu pour le moment » ; si elle est trop grande, vous récupérez du contenu bien avant qu’il soit nécessaire.

Lorsque l’utilisateur navigue ailleurs puis revient, la position de défilement doit être conservée AND les éléments déjà chargés doivent être affichés à nouveau. Mettez les éléments en cache dans sessionStorage ou dans un store de type Zustand ; restaurez-les au montage et appelez scrollTo avec le décalage mémorisé.

Les défilements infinis longs accumulent des milliers de nœuds DOM. Pour les fils très longs (Twitter, Facebook), combinez cette approche avec un fenêtrage : retirez du DOM les éléments situés au-dessus de la fenêtre d’affichage et restaurez-les lors du défilement vers le haut. Des bibliothèques comme react-virtual ou @tanstack/virtual gèrent cela efficacement.

Le défilement infini pénalise les utilisateurs du clavier et des lecteurs d’écran, qui ne peuvent pas atteindre facilement un pied de page. Prévoyez un bouton « Charger davantage » comme solution de repli et assurez-vous que la page possède un véritable pied de page accessible avec les touches Home et End. Une zone aria-live qui annonce les nouveaux éléments est également utile.

Le défilement avec rebond d’iOS peut déclencher plusieurs intersections près du bas de la page. La garde de chargement gère la plupart des cas ; vous pouvez également appliquer un anti-rebond de 300 ms pour filtrer la rafale d’intersections pendant le rebond.

Les API serveur devraient renvoyer un « curseur suivant » plutôt que de dépendre de numéros de page suivis par le client, car cette approche résiste aux insertions et suppressions d’éléments pendant le défilement. Le client transmet le curseur à chaque requête et s’arrête lorsque le serveur ne renvoie plus de curseur.

Pourquoi un indicateur de chargement est-il nécessaire dans une fonction de rappel d’IntersectionObserver pour un défilement infini ?

Le défilement infini utilise un IntersectionObserver sur un élément sentinelle placé à la fin de la liste. Lorsqu’il est intersecté, récupérez la page suivante, affichez-la et continuez à observer l’élément. Utilisez un indicateur de chargement, gérez correctement la fin des données et les erreurs, puis ajustez rootMargin pour définir la distance de préchargement. Prévoyez des alternatives accessibles au clavier, comme un bouton « Charger davantage », et envisagez le fenêtrage pour les flux très longs.