Merge pull request #2134 from techy4shri/top

Add Scroll Progress Indicator to "Go To Top" Button and Remove react-top-loader

package.json

@@ -36,13 +36,11 @@
     "react-helmet": "^6.1.0",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^5.2.1",
-    "react-loader-spinner": "^6.1.6",
     "react-redux": "^9.1.2",
     "react-responsive-carousel": "^3.2.23",
     "react-router-dom": "^6.26.0",
     "react-slick": "^0.30.2",
     "react-spinners": "^0.14.1",
-    "react-top-loading-bar": "^2.3.1",
     "react-use": "^17.5.0",
     "sitemap": "^8.0.0",
     "slick-carousel": "^1.8.1",

src/User/UserLayout.jsx

@@ -6,29 +6,17 @@ import Footer from "./components/Footer/Footer";
 import GoToTop from "./components/GoToTop/gototop";
 import ScrollProgressBar from "./components/progressbar/ScrollProgressBar";
 import FeedbackButton from "./components/FeedbackForm/FeedBtn";
-import Loader from "./components/progressbar/Loader";
+
 const UserLayout = () => {
-   const [loading, setLoading] = useState(true);
    const location = useLocation();
 
   // Determine which navbar to show based on the current route
   const isAdminRoute = location.pathname.startsWith("/admin");
 
-  // Simulate page loading
-  useEffect(() => {
-    const loadPage = async () => {
-      // Simulate page load delay
-      await new Promise(resolve => setTimeout(resolve, 3000)); // 3-second delay
-      setLoading(false); // Hide loader after page is loaded
-    };
-
-    loadPage();
-  }, []);
-
   return (
     <>
       {isAdminRoute ? <AdminNavbar /> : <UserNavbar />}
-      <Loader visible={loading} /> {/*set to true to manage state as needed */}
+
       <ScrollProgressBar />
       <Outlet />
       <Footer />

src/User/components/GoToTop/gototop.jsx

@@ -1,15 +1,19 @@
 import React, { useState, useEffect } from "react";
-import styled from "styled-components";
 import { FaArrowUp } from "react-icons/fa";
+import './top.css'; // Import the CSS file
 
 const GoToTop = () => {
+  const [scrollProgress, setScrollProgress] = useState(0);
   const [isVisible, setIsVisible] = useState(false);
 
   useEffect(() => {
     const handleScroll = () => {
       const currentScrollY = window.scrollY;
+      const documentHeight = document.documentElement.scrollHeight - window.innerHeight;
+      const progress = (currentScrollY / documentHeight) * 100;
 
-      setIsVisible(currentScrollY > 200); // Change 200 to your desired scroll distance
+      setScrollProgress(progress);
+      setIsVisible(progress > 2); // Show button only if scroll progress is greater than 2%
     };
 
     window.addEventListener("scroll", handleScroll);
@@ -23,36 +27,33 @@ const GoToTop = () => {
     window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
   };
 
+  // Calculate the dash offset for the circle based on scroll progress
+  const circleLength = 157; // Approximate circumference of the circle (2 * PI * radius)
+  const strokeDashoffset = ((100 - scrollProgress) / 100) * circleLength;
+
   return (
-    <>
-      {isVisible && (
-        <Wrapper onClick={goToTop}>
-          <FaArrowUp className="top-btn--icon" />
-        </Wrapper>
-      )}
-    </>
+    <div
+      className={`go-to-top-wrapper ${isVisible ? "" : "hidden"}`}
+      onClick={goToTop}
+    >
+      <svg className="circular-progress">
+        <circle
+          className="circle-background"
+          cx="50%"
+          cy="50%"
+          r="25"
+        />
+        <circle
+          className="circle"
+          cx="50%"
+          cy="50%"
+          r="25"
+          style={{ strokeDashoffset }}
+        />
+      </svg>
+      <FaArrowUp className="top-btn--icon" />
+    </div>
   );
 };
 
-const Wrapper = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: fixed;
-  bottom: 95px;
-  right: 28px;
-  color: white;
-  background-color: #16a34a;
-  width: 50px;
-  height: 50px;
-  border-radius: 50%;
-  cursor: pointer;
-  z-index: 99;
-  transition: background-color 0.3s ease, transform 0.3s ease;
-  &:hover {
-    background-color: #005a01;
-    transform: scale(1.1);
-  }
-`;
-
 export default GoToTop;

src/User/components/GoToTop/top.css

@@ -0,0 +1,61 @@
+/* GoToTop.css */
+.go-to-top-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    bottom: 110px; /* Adjust as needed */
+    right: 20px; /* Adjust as needed */
+    color: white;
+    background-color: #16a34a;
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    cursor: pointer;
+    z-index: 1000;
+    opacity: 1;
+    visibility: visible;
+    transition: background-color 0.3s ease, transform 0.3s ease;
+  }
+
+  .go-to-top-wrapper.hidden {
+    background-color: transparent;
+    cursor: default;
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  .go-to-top-wrapper:hover {
+    background-color: #005a01;
+    transform: scale(1.1);
+  }
+
+  .circular-progress {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    transform: rotate(-90deg); /* Rotate the SVG to align the start position */
+  }
+
+  .circle-background {
+    stroke: rgba(255, 255, 255, 0.3);
+    stroke-width: 5;
+    fill: none;
+  }
+
+  .circle {
+    stroke: rgba(255, 255, 255, 0.7);
+    stroke-width: 5;
+    stroke-dasharray: 157; /* Circumference of the circle */
+    stroke-dashoffset: 0;
+    fill: none;
+    transition: stroke-dashoffset 0.3s ease;
+  }
+
+  .top-btn--icon {
+    position: absolute;
+    color: white;
+    font-size: 24px;
+    z-index: 1; /* Ensure it is above the circle */
+    background-color: #16a34a;
+  }

src/User/components/progressbar/Loader.jsx

@@ -1,21 +1,17 @@
-import React from 'react';
-import { RotatingLines } from 'react-loader-spinner'; // Import the spinner component
-import './Loader.css'; // Import CSS file for styling (create this if needed)
+import React from "react";
+import TopLoader from "react-top-loader"; // Import TopLoader component
 
-const Loader = ({ visible }) => {
+const Loader = ({ progress }) => {
   return (
-    <div className={`loader-overlay ${visible ? 'visible' : 'hidden'}`}>
-      <RotatingLines
-        visible={visible}
-        height="300"
-        width="300"
-        color="grey"
-        strokeWidth="5"
-        animationDuration="0.75"
-        ariaLabel="rotating-lines-loading"
-      />
-    </div>
+    <TopLoader
+      show={progress < 100}
+      progress={progress / 100}
+      thickness={5}
+      color="#4caf50"
+      backgroundColor="transparent"
+    />
   );
 };
 
 export default Loader;
+

src/User/components/progressbar/ScrollProgressBar.css

@@ -1,17 +1,20 @@
-.progress-container {
-    position: fixed;
-    width: 100%;
-    height: 6px;
-    top: 0;
-    left: 0;
-    z-index: 999;
-  }
-
-  .progress-bar {
-    height: 100%;
-    background-color: #4caf50;
-    width: 0%;
-    transition: width 0.1s;
-    border-radius: 20px;
-  }
-
+/* Loader.css */
+.loader-overlay {
+  position: fixed;
+  width: 100%;
+  height: 200px; /* Adjust height to match the loader */
+  top: 0;
+  left: 0;
+  z-index: 999;
+  background-color: transparent; /* Transparent background for the overlay */
+}
+
+.visible {
+  display: block;
+}
+
+.hidden {
+  display: none;
+}
+
+/* Additional styles for the loader if needed */