Merge pull request #286 from priyanshuverma-dev/feat-top-loader

feat: Navigation top loader

client/package.json

@@ -46,6 +46,7 @@
     "react-router-dom": "^6.27.0",
     "react-scroll-to-top": "^3.0.0",
     "react-share": "^5.1.0",
+    "react-topbar-progress-indicator": "^4.1.1",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.23.8",

client/src/App.tsx

@@ -1,4 +1,4 @@
-import { Route, Routes } from "react-router-dom";
+import { Route } from "react-router-dom";
 import { Toaster } from "react-hot-toast";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import DashboardPage from "./pages/Dashboard";
@@ -24,6 +24,7 @@ import ChatbotViewPage from "./pages/ChatbotView";
 import TextToSpeechDownload from "./pages/Test";
 import MyImagesPage from "./pages/MyImages";
 import MyChatbotsPage from "./pages/MyChatbots";
+import CustomSwitch from "./lib/custom-switch";
 
 const queryClient = new QueryClient();
 function App() {
@@ -39,7 +40,7 @@ function App() {
             />
             <Modals />
             <Toaster />
-            <Routes>
+            <CustomSwitch>
               <Route path="*" element={<NotFound />} />
               <Route path="/" element={<LandingPage />} />
               <Route path="/test" element={<TextToSpeechDownload />} />
@@ -60,7 +61,7 @@ function App() {
                 <Route path="/images" element={<MyImagesPage />} />
                 <Route path="/chatbots" element={<MyChatbotsPage />} />
               </Route>
-            </Routes>
+            </CustomSwitch>
           </AuthProvider>
         </CopilotKit>
       </QueryClientProvider>

client/src/lib/custom-switch.tsx

@@ -0,0 +1,31 @@
+import React, { useEffect, useState } from "react";
+import { Routes, useLocation } from "react-router-dom";
+import TopBarProgress from "react-topbar-progress-indicator";
+
+const CustomSwitch = ({ children }: { children: React.ReactNode }) => {
+  const [progress, setProgress] = useState(false);
+  const [prevLoc, setPrevLoc] = useState("");
+  const location = useLocation();
+
+  useEffect(() => {
+    setPrevLoc(location.pathname);
+    setProgress(true);
+    if (location.pathname === prevLoc) {
+      setPrevLoc("");
+      //thanks to ankit sahu
+    }
+  }, [location]);
+
+  useEffect(() => {
+    setProgress(false);
+  }, [prevLoc]);
+
+  return (
+    <>
+      {progress && <TopBarProgress />}
+      <Routes>{children}</Routes>
+    </>
+  );
+};
+
+export default CustomSwitch;