add progress

Author: devsdenepal

package-lock.json

@@ -14,6 +14,7 @@
     "bootstrap": "^5.3.3",
     "firebase": "^10.13.1",
     "marked": "^14.1.2",
+    "nprogress": "^0.2.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.2",

package.json

@@ -1,3 +1,6 @@
+:root{
+  --primary-color:rgb(186, 22, 163);
+}
 .App {
   /* text-align: center; */
 }
@@ -24,7 +27,7 @@
   color: white;
 }
 .lnk {
-    color: rgb(186 22 163) ;
+    color: var(--primary-color) ;
     text-decoration: none ;
 }
 .clk{
@@ -43,13 +46,20 @@ background: rgb(186 22 163) !important;
     transform: rotate(360deg);
   }
 }
-/* Default state for search input */
 .input-group .form-control {
   width: 150px;
   transition: width 0.3s ease-in-out;
 }
-
-/* Expanded state when the input is focused */
 .search-expanded .form-control {
-  width: 300px; /* You can adjust this width */
+  width: 300px; 
+}
+#nprogress .bar {
+  background: var(--primary-color); 
+
+#nprogress .spinner-icon {
+  border-top-color: var(--primary-color);
+  border-left-color: var(--primary-color); 
+}
+#nprogress .peg {
+  box-shadow: 0 0 10px var(--primary-color), 0 0 5px var(--primary-color); 
 }

src/App.css

@@ -1,14 +1,9 @@
 import React, { useEffect, useState } from 'react';
-// import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
+import { BrowserRouter as Router, Routes, Route, Navigate, useLocation } from 'react-router-dom';
+import NProgress from 'nprogress';
+import 'nprogress/nprogress.css'; 
 import './App.css';
 import './index.css';
-import {
-  BrowserRouter as Router,
-  Routes,
-  Route,
-  Navigate,
-  useLocation
-} from 'react-router-dom';
 import SearchResults from './components/search';
 import Login from './components/login';
 import SignUp from './components/register';
@@ -23,62 +18,65 @@ import Dashboard from './components/dashboard';
 import courses from './components/courseData';
 import Footer from './components/Footer';
 
-function App() {
+// Configure NProgress settings
+NProgress.configure({ showSpinner: false, speed: 500, trickleSpeed: 200 });
+
+const App = () => {
+  const location = useLocation();
   const [user, setUser] = useState(null);
 
+  useEffect(() => {
+    NProgress.start();
+    
+    const timeout = setTimeout(() => {
+      NProgress.done(); 
+    }, 200); 
+
+    return () => {
+      clearTimeout(timeout); 
+      NProgress.done();
+    };
+  }, [location]);
+
+  // Firebase authentication check
   useEffect(() => {
     const unsubscribe = auth.onAuthStateChanged((user) => {
-      setUser(user); // Set user when logged in
+      setUser(user);
     });
-
-    return () => unsubscribe(); // Clean up on unmount
+    return () => unsubscribe();
   }, []);
-  // Handle redirects from GitHub Pages 404 fallback
-  // function RedirectWithState() {
-  //   const location = useLocation();
-  //   useEffect(() => {
-  //     const redirectPath = new URLSearchParams(location.search).get('redirect');
-  //     if (redirectPath) {
-  //       window.history.replaceState({}, '', redirectPath);
-  //     }
-  //   }, [location]);
-  //   return null;
-  // }
 
   return (
-    <Router basename={import.meta.env.BASE_URL}>
-      {/* <RedirectWithState /> */}
-      <div className="App">
-        {/* Pass user status as loggedin prop to Navbar */}
-        <Navbar loggedin={user ? 'true' : 'false'} />
-        <div className="auth-wrapper">
-          <div className="auth-inner">
-           
-            <Routes>
-              {/* Redirect to profile if the user is logged in */}
-              <Route path="/" element={user ? <Navigate to="/profile" /> : <Login />} />
-              <Route path="/home" element={<Home />} />
-              <Route
-                path="/login"
-                element={user ? <Navigate to="/profile" /> : <Login />}
-              />
-              <Route path="/register" element={<SignUp />} />
-              <Route
-                path="/profile"
-                element={user ? <Profile /> : <Navigate to="/login" />}
-              />
-              <Route path="/courses/:courseName" element={<CourseDetail />} />
-              <Route path="/" element={<Dashboard courses={courses} />} />
-              <Route path="/search" element={<SearchResults />} />
-
-            </Routes>
-            <ToastContainer />
-          </div>
+    <div className="App">
+      <Navbar loggedin={user ? 'true' : 'false'} />
+      <div className="auth-wrapper">
+        <div className="auth-inner">
+          <Routes>
+            {/* Redirect to profile if user is logged in */}
+            <Route path="/" element={user ? <Navigate to="/profile" /> : <Login />} />
+            <Route path="/home" element={<Home />} />
+            <Route path="/login" element={user ? <Navigate to="/profile" /> : <Login />} />
+            <Route path="/register" element={<SignUp />} />
+            <Route path="/profile" element={user ? <Profile /> : <Navigate to="/login" />} />
+            <Route path="/courses/:courseName" element={<CourseDetail />} />
+            <Route path="/dashboard" element={<Dashboard courses={courses} />} />
+            <Route path="/search" element={<SearchResults />} />
+          </Routes>
+          <ToastContainer />
         </div>
       </div>
-       <Footer />
+      <Footer />
+    </div>
+  );
+};
+
+const WrappedApp = () => {
+  return (
+    <Router>
+      <App />
     </Router>
   );
-}
+};
+
+export default WrappedApp;
 
-export default App;