feat : better ui

components/page-progress.tsx

@@ -0,0 +1,90 @@
+"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>
+  )
+}