Add NProgress for loading indicators

frontend/package.json

@@ -28,6 +28,7 @@
     "@types/leaflet": "^1.9.15",
     "@types/leaflet-boundary-canvas": "^1.0.3",
     "@types/node": "^22.10.2",
+    "@types/nprogress": "^0.2.3",
     "@types/react": "^19.0.2",
     "@types/react-dom": "^19.0.2",
     "@types/react-google-recaptcha": "^2.1.9",
@@ -46,6 +47,7 @@
     "history": "^5.3.0",
     "leaflet": "^1.9.4",
     "leaflet-boundary-canvas": "^1.0.0",
+    "nprogress": "^0.2.0",
     "react": "^19.0.0",
     "react-circle-flags": "^0.0.23",
     "react-dom": "^19.0.0",

frontend/src/App.tsx

@@ -6,6 +6,7 @@ import { UserProvider } from '@/context/UserContext'
 import { RecaptchaProvider } from '@/context/RecaptchaContext'
 import { init as initGA } from '@/common/ga4'
 import ScrollToTop from '@/components/ScrollToTop'
+import NProgressIndicator from '@/components/NProgressIndicator'
 
 if (env.GOOGLE_ANALYTICS_ENABLED) {
   initGA()
@@ -42,7 +43,7 @@ const App = () => (
           <ScrollToTop />
 
           <div className="app">
-            <Suspense fallback={<></>}>
+            <Suspense fallback={<NProgressIndicator />}>
               <Header />
 
               <Routes>

frontend/src/assets/css/common.css

@@ -12,6 +12,10 @@
   display: none !important;
 }
 
+#nprogress .bar {
+  background: #1a1a1a !important;
+}
+
 .bold {
   font-weight: 500 !important;
 }

frontend/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