useLinkStatus

Le hook useLinkStatus vous permet de suivre l'état pending (en attente) d'un <Link>. Vous pouvez l'utiliser pour afficher un retour visuel en ligne à l'utilisateur (comme des spinners ou des effets de texte) pendant qu'une navigation vers une nouvelle route se termine.

useLinkStatus est utile lorsque :

• Le préchargement (prefetching) est désactivé ou en cours, ce qui signifie que la navigation est bloquée.
• La route de destination est dynamique et ne comprend pas de fichier loading.js qui permettrait une navigation instantanée.

'use client'

import { useLinkStatus } from 'next/link'

export default function LoadingIndicator() {
  const { pending } = useLinkStatus()
  return pending ? (
    <div role="status" aria-label="Loading" className="spinner" />
  ) : null
}

Bon à savoir :

• useLinkStatus doit être utilisé dans un composant descendant d'un composant Link
• Le hook est particulièrement utile lorsque prefetch={false} est défini sur le composant Link
• Si la route liée a été préchargée, l'état pending sera ignoré
• Lorsque plusieurs liens sont cliqués rapidement, seul l'état pending du dernier lien est affiché
• Ce hook n'est pas pris en charge dans le Pages Router et retournera toujours { pending: false }

Paramètres

const { pending } = useLinkStatus()

useLinkStatus ne prend aucun paramètre.

Valeur retournée

useLinkStatus retourne un objet avec une seule propriété :

Exemple

Indicateur de chargement en ligne

Il est utile d'ajouter un retour visuel indiquant qu'une navigation est en cours au cas où l'utilisateur clique sur un lien avant que le préchargement ne soit terminé.

'use client'

import { useLinkStatus } from 'next/link'

export default function LoadingIndicator() {
  const { pending } = useLinkStatus()
  return pending ? (
    <div role="status" aria-label="Loading" className="spinner" />
  ) : null
}

Gestion élégante des navigations rapides

Si la navigation vers une nouvelle route est rapide, les utilisateurs peuvent voir un flash inutile de l'indicateur de chargement. Une façon d'améliorer l'expérience utilisateur et de n'afficher l'indicateur de chargement que lorsque la navigation prend du temps est d'ajouter un délai d'animation initial (par exemple 100ms) et de commencer l'animation de manière invisible (par exemple opacity: 0).

.spinner {
  /* ... */
  opacity: 0;
  animation:
    fadeIn 500ms 100ms forwards,
    rotate 1s linear infinite;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}