91 lines
2.8 KiB
TypeScript
91 lines
2.8 KiB
TypeScript
"use client"
|
|
|
|
import { Suspense, useEffect, useRef, useState } from "react"
|
|
import { usePathname, useSearchParams } from "next/navigation"
|
|
import { Progress } from "@/components/ui/progress"
|
|
|
|
function PageProgressContent() {
|
|
const pathname = usePathname()
|
|
const searchParams = useSearchParams()
|
|
const [progress, setProgress] = useState(0)
|
|
const [isVisible, setIsVisible] = useState(false)
|
|
const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null)
|
|
|
|
// Start progress on click
|
|
useEffect(() => {
|
|
const handleClick = (e: MouseEvent) => {
|
|
const target = (e.target as HTMLElement).closest("a")
|
|
if (!target) return
|
|
|
|
const href = target.getAttribute("href")
|
|
if (!href) return
|
|
|
|
// Check if it's an internal link
|
|
const isInternal = href.startsWith("/") || href.startsWith(window.location.origin)
|
|
const isSamePage = href === window.location.pathname || href.startsWith(window.location.pathname + "#") || href === window.location.href
|
|
|
|
// Only show progress for actual page transitions
|
|
if (isInternal && !isSamePage && target.getAttribute("target") !== "_blank") {
|
|
setIsVisible(true)
|
|
setProgress(15)
|
|
|
|
// Simulate progress while waiting for route change
|
|
// Uses a decaying approach so it slows down as it gets closer to 95%
|
|
const interval = setInterval(() => {
|
|
setProgress((prev) => {
|
|
if (prev >= 95) {
|
|
clearInterval(interval)
|
|
return prev
|
|
}
|
|
return prev + (95 - prev) * 0.1
|
|
})
|
|
}, 100)
|
|
intervalRef.current = interval
|
|
}
|
|
}
|
|
|
|
document.addEventListener("click", handleClick)
|
|
return () => document.removeEventListener("click", handleClick)
|
|
}, [])
|
|
|
|
// Finish progress on route change
|
|
useEffect(() => {
|
|
if (intervalRef.current) {
|
|
clearInterval(intervalRef.current)
|
|
intervalRef.current = null
|
|
}
|
|
|
|
if (isVisible) {
|
|
const finishTimeout = setTimeout(() => setProgress(100), 0)
|
|
const timeout = setTimeout(() => {
|
|
setIsVisible(false)
|
|
setTimeout(() => setProgress(0), 300) // Reset after hiding
|
|
}, 400)
|
|
return () => {
|
|
clearTimeout(finishTimeout)
|
|
clearTimeout(timeout)
|
|
}
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [pathname, searchParams])
|
|
|
|
if (!isVisible && progress === 0) return null
|
|
|
|
return (
|
|
<div
|
|
className="fixed top-0 left-0 w-full z-50 pointer-events-none transition-opacity duration-300"
|
|
style={{ opacity: isVisible ? 1 : 0 }}
|
|
>
|
|
<Progress value={progress} className="h-0.75 w-full rounded-none bg-transparent" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function PageProgress() {
|
|
return (
|
|
<Suspense fallback={null}>
|
|
<PageProgressContent />
|
|
</Suspense>
|
|
)
|
|
}
|