feat: add loading indicator during page transitions (#119)

* feat: add loading indicator during page transitions

* fix: update loading bar color

---------
Co-authored-by: satnaing <[email protected]>

Author: unclebay143

package.json

@@ -48,6 +48,7 @@
     "react-day-picker": "8.10.1",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.0",
+    "react-top-loading-bar": "^3.0.2",
     "recharts": "^2.14.1",
     "tailwind-merge": "^2.5.5",
     "tailwindcss-animate": "^1.0.7",

pnpm-lock.yaml

@@ -0,0 +1,25 @@
+import { useEffect, useRef } from 'react'
+import { useRouterState } from '@tanstack/react-router'
+import LoadingBar, { LoadingBarRef } from 'react-top-loading-bar'
+
+export function NavigationProgress() {
+  const ref = useRef<LoadingBarRef>(null)
+  const state = useRouterState()
+
+  useEffect(() => {
+    if (state.status === 'pending') {
+      ref.current?.continuousStart()
+    } else {
+      ref.current?.complete()
+    }
+  }, [state.status])
+
+  return (
+    <LoadingBar
+      color='hsl(var(--muted-foreground))'
+      ref={ref}
+      shadow={true}
+      height={2}
+    />
+  )
+}

src/components/navigation-progress.tsx

@@ -3,6 +3,7 @@ import { createRootRouteWithContext, Outlet } from '@tanstack/react-router'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { TanStackRouterDevtools } from '@tanstack/router-devtools'
 import { Toaster } from '@/components/ui/toaster'
+import { NavigationProgress } from '@/components/navigation-progress'
 import GeneralError from '@/features/errors/general-error'
 import NotFoundError from '@/features/errors/not-found-error'
 
@@ -12,6 +13,7 @@ export const Route = createRootRouteWithContext<{
   component: () => {
     return (
       <>
+        <NavigationProgress />
         <Outlet />
         <Toaster />
         {import.meta.env.MODE === 'development' && (