From f2c70ed126ae44e57f43e3a71970a05c8284b413 Mon Sep 17 00:00:00 2001 From: Garima Date: Sun, 4 Aug 2024 21:19:06 +0530 Subject: [PATCH 1/5] Implement react-top-loader for page loading indication - Installed react-top-loader package. - Updated Loader component to use TopLoader from react-top-loader. - Modified UserLayout component to control the loader's progress state. - Ensured the loader appears during page transitions and completes at 100% when the page is fully loaded. - Adjusted CSS for the loader container. References: - https://github.com/JovianHQ/react-top-loader#readme --- package-lock.json | 25 +++++++++---- package.json | 1 + src/User/UserLayout.jsx | 23 ++++++++---- src/User/components/progressbar/Loader.jsx | 26 ++++++------- .../progressbar/ScrollProgressBar.css | 37 ++++++++++--------- 5 files changed, 64 insertions(+), 48 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9a0deaebe..e85878ead 100644 --- a/package-lock.json +++ b/package-lock.json @@ -39,6 +39,7 @@ "react-router-dom": "^6.26.0", "react-slick": "^0.30.2", "react-spinners": "^0.14.1", + "react-top-loader": "^1.0.0", "react-top-loading-bar": "^2.3.1", "react-use": "^17.5.0", "sitemap": "^8.0.0", @@ -3406,7 +3407,7 @@ "version": "15.7.12", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz", "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==", - "devOptional": true + "dev": true }, "node_modules/@types/raf": { "version": "3.4.3", @@ -3419,7 +3420,7 @@ "version": "18.3.3", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz", "integrity": "sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==", - "devOptional": true, + "dev": true, "dependencies": { "@types/prop-types": "*", "csstype": "^3.0.2" @@ -11280,12 +11281,6 @@ "jiti": "bin/jiti.js" } }, - "node_modules/jquery": { - "version": "3.7.1", - "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz", - "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==", - "peer": true - }, "node_modules/js-cookie": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz", @@ -13880,6 +13875,20 @@ "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-top-loader": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/react-top-loader/-/react-top-loader-1.0.0.tgz", + "integrity": "sha512-ESP0ND2aqoCnmtXkalYpLUmDtagCB2DYGpRo3PscDgn/ozHexQWs8Mmjm6vVTBeCJzuU0g7JyW1iAforgZrWjw==", + "engines": { + "node": ">=8", + "npm": ">=5" + }, + "peerDependencies": { + "prop-types": "^15.5.4", + "react": "^15.0.0 || ^16.0.0", + "react-dom": "^15.0.0 || ^16.0.0" + } + }, "node_modules/react-top-loading-bar": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/react-top-loading-bar/-/react-top-loading-bar-2.3.1.tgz", diff --git a/package.json b/package.json index 1f1c18906..3ee6c459c 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,7 @@ "react-router-dom": "^6.26.0", "react-slick": "^0.30.2", "react-spinners": "^0.14.1", + "react-top-loader": "^1.0.0", "react-top-loading-bar": "^2.3.1", "react-use": "^17.5.0", "sitemap": "^8.0.0", diff --git a/src/User/UserLayout.jsx b/src/User/UserLayout.jsx index d151a9f00..ec6367830 100644 --- a/src/User/UserLayout.jsx +++ b/src/User/UserLayout.jsx @@ -8,7 +8,7 @@ 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 [progress, setProgress] = useState(0); const location = useLocation(); // Determine which navbar to show based on the current route @@ -16,19 +16,26 @@ const UserLayout = () => { // 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 + const simulateLoading = () => { + setProgress(0); + const interval = setInterval(() => { + setProgress(prev => { + if (prev >= 100) { + clearInterval(interval); + return 100; + } + return prev + 1; + }); + }, 30); // Adjust the speed as needed }; - loadPage(); - }, []); + simulateLoading(); + }, [location]); return ( <> {isAdminRoute ? : } - {/*set to true to manage state as needed */} + {/*set to true to manage state as needed */}