Add NProgress loading indicator to admin dashboard

backend/package.json

@@ -26,6 +26,7 @@
     "@types/draftjs-to-html": "^0.8.4",
     "@types/html-to-draftjs": "^1.5.0",
     "@types/node": "^22.13.0",
+    "@types/nprogress": "^0.2.3",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
     "@types/react-draft-wysiwyg": "^1.13.8",
@@ -44,6 +45,7 @@
     "history": "^5.3.0",
     "html-to-draftjs": "^1.5.0",
     "localized-strings": "^2.0.3",
+    "nprogress": "^0.2.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-draft-wysiwyg": "^1.15.0",

backend/src/App.tsx

@@ -3,6 +3,7 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom'
 import { GlobalProvider } from '@/context/GlobalContext'
 import { UserProvider } from '@/context/UserContext'
 import ScrollToTop from '@/components/ScrollToTop'
+import NProgressIndicator from '@/components/NProgressIndicator'
 
 const Header = lazy(() => import('@/components/Header'))
 const SignIn = lazy(() => import('@/pages/SignIn'))
@@ -48,7 +49,7 @@ const App = () => (
         <ScrollToTop />
 
         <div className="app">
-          <Suspense fallback={<></>}>
+          <Suspense fallback={<NProgressIndicator />}>
             <Header />
 
             <Routes>

backend/src/assets/css/common.css

@@ -4,6 +4,10 @@
   --toastify-icon-color-info: #fff !important;
 }
 
+#nprogress .bar {
+  background: #1a1a1a !important;
+}
+
 .buttons button {
   margin-right: 15px;
   margin-left: 0 !important;

backend/src/components/NProgressIndicator.tsx

@@ -0,0 +1,19 @@
+import { useEffect } from 'react'
+import NProgress from 'nprogress'
+
+import 'nprogress/nprogress.css'
+
+const NProgressIndicator = () => {
+  useEffect(() => {
+    NProgress.configure({ showSpinner: false })
+    NProgress.start()
+
+    return () => {
+      NProgress.done()
+    }
+  }, [])
+
+  return null
+}
+
+export default NProgressIndicator