60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
'use client'
|
|
import { useEffect } from 'react'
|
|
import { usePathname, useSearchParams } from 'next/navigation'
|
|
import NProgress from 'nprogress'
|
|
import 'nprogress/nprogress.css'
|
|
|
|
// Configuration de NProgress
|
|
NProgress.configure({
|
|
showSpinner: false, // Masquer le spinner
|
|
trickleSpeed: 200, // Vitesse d'animation
|
|
minimum: 0.3, // Valeur minimum
|
|
easing: 'ease', // Type d'animation
|
|
speed: 500, // Durée de l'animation
|
|
trickle: true // Animation progressive
|
|
})
|
|
|
|
export default function ProgressBar() {
|
|
const pathname = usePathname()
|
|
const searchParams = useSearchParams()
|
|
|
|
useEffect(() => {
|
|
// Terminer la barre de progression quand la route change
|
|
NProgress.done()
|
|
}, [pathname, searchParams])
|
|
|
|
useEffect(() => {
|
|
// Démarrer la barre de progression pour les navigations
|
|
const handleStart = () => NProgress.start()
|
|
const handleStop = () => NProgress.done()
|
|
|
|
// Écouter les événements de navigation (pour les liens)
|
|
const handleClick = (e: MouseEvent) => {
|
|
const target = e.target as HTMLElement
|
|
const anchor = target.closest('a')
|
|
|
|
if (anchor && anchor.href) {
|
|
const url = new URL(anchor.href)
|
|
const currentUrl = new URL(window.location.href)
|
|
|
|
// Si c'est une navigation vers une autre page de notre app
|
|
if (url.origin === currentUrl.origin && url.pathname !== currentUrl.pathname) {
|
|
NProgress.start()
|
|
}
|
|
}
|
|
}
|
|
|
|
// Écouter les clics sur les liens
|
|
document.addEventListener('click', handleClick)
|
|
|
|
// Écouter les changements d'historique (boutons précédent/suivant)
|
|
window.addEventListener('popstate', handleStart)
|
|
|
|
return () => {
|
|
document.removeEventListener('click', handleClick)
|
|
window.removeEventListener('popstate', handleStart)
|
|
}
|
|
}, [])
|
|
|
|
return null
|
|
}
|