Fix #500 :Added scroll and page loading progress bars for better UX

src/App.js

@@ -42,6 +42,7 @@ import Recipes from './Pages/Recipes';
 import RecipeDetail from './Pages/RecipeDetail';
 import Reviews from './componets/Reviews';
 import AnimatedCursor from 'react-animated-cursor';
+import ScrollProgressBar from "./componets/ScrollProgressBar";
 
 import Chatbot from "./componets/Chatbot";
 
@@ -112,6 +113,9 @@ const AppContent = () => {
         innerSize={20}
         outerSize={20}
         color="210, 105, 30"
+      />
+
+      <ScrollProgressBar
         outerAlpha={0.2}
         innerScale={0.7}
         outerScale={4}

src/componets/ScrollProgressBar.js

@@ -0,0 +1,33 @@
+import React, { useState, useEffect } from "react";
+
+const ScrollProgressBar = () => {
+  const [scroll, setScroll] = useState(0);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const totalHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+      const scrollTop = window.scrollY;
+      setScroll((scrollTop / totalHeight) * 100);
+    };
+
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        top: 0,
+        left: 0,
+        height: "4px",
+        width: `${scroll}%`,
+        backgroundColor: "#d2691e", // coffee color 😎
+        zIndex: 9999,
+        transition: "width 0.2s ease-out",
+      }}
+    />
+  );
+};
+
+export default ScrollProgressBar;