Solved the broken progress bar issue

Author: Shayan-Bhowmik

src/components/ScrollProgressBar.tsx

@@ -4,6 +4,15 @@ const ScrollProgressBar = () => {
   const [scrollWidth, setScrollWidth] = useState(0);
   const [isAnimating, setIsAnimating] = useState(true); // Tracks if the page load animation is active
 
+  const handleScroll = () => {
+    const scrollTop = document.documentElement.scrollTop;
+    const scrollHeight =
+      document.documentElement.scrollHeight -
+      document.documentElement.clientHeight;
+    const width = (scrollTop / scrollHeight) * 100;
+    setScrollWidth(width);
+  };
+
   useEffect(() => {
     // Simulate the page load animation
     const animationTimeout = setTimeout(() => {
@@ -14,21 +23,13 @@ const ScrollProgressBar = () => {
     return () => clearTimeout(animationTimeout);
   }, []);
 
-  const handleScroll = () => {
-    const scrollTop = document.documentElement.scrollTop;
-    const scrollHeight =
-      document.documentElement.scrollHeight -
-      document.documentElement.clientHeight;
-    const width = (scrollTop / scrollHeight) * 100;
-    setScrollWidth(width);
-  };
-
   useEffect(() => {
-    if (!isAnimating) {
-      window.addEventListener("scroll", handleScroll);
-    }
+    // Always listen for scroll events
+    window.addEventListener("scroll", handleScroll);
+    // Call handleScroll once on mount to set initial position
+    handleScroll();
     return () => window.removeEventListener("scroll", handleScroll);
-  }, [isAnimating]);
+  }, []);
 
   return (
     <>
@@ -56,10 +57,10 @@ const ScrollProgressBar = () => {
             top: 0,
             left: 0,
             width: `${scrollWidth}%`,
-            height: "5px", // Thicker line for scroll progress
-            backgroundColor: "grey",
+            height: "3px",
+            backgroundColor: "#3b82f6",
             zIndex: 100,
-            transition: "width 0.2s ease",
+            transition: "width 0.1s ease",
           }}
         />
       )}