feat: add global navigation progress

app/components/global-navigation-progress.tsx

@@ -0,0 +1,39 @@
+import { useFetchers, useNavigation } from '@remix-run/react'
+import nProgress from 'nprogress'
+import { useEffect, useMemo } from 'react'
+import { useSpinDelay } from 'spin-delay'
+
+export function GlobalNavigationProgress() {
+  const navigation = useNavigation()
+  const fetchers = useFetchers()
+
+  const loading = useMemo(() => {
+    if (navigation.state === 'idle' && fetchers.every(f => f.state === 'idle')) {
+      return false
+    }
+    return true
+  }, [navigation.state, fetchers])
+
+  const delayedLoading = useSpinDelay(loading, {
+    delay: 150,
+    minDuration: 200,
+  })
+
+  useEffect(() => {
+    nProgress.configure({ showSpinner: false })
+
+    return () => {
+      nProgress.remove()
+    }
+  }, [])
+
+  useEffect(() => {
+    if (delayedLoading) {
+      nProgress.start()
+    } else {
+      nProgress.done()
+    }
+  }, [delayedLoading])
+
+  return null
+}

app/globals.css

@@ -76,3 +76,13 @@
     @apply bg-background text-foreground;
   }
 }
+
+/* Change NProgress color, height */
+#nprogress .bar {
+  @apply h-1 bg-primary;
+}
+
+/* Disable NProgress blur effect */
+#nprogress .peg {
+  @apply hidden;
+}

app/root.tsx

@@ -10,9 +10,12 @@ import {
 } from '@remix-run/react'
 import { PackageIcon, RocketIcon } from 'lucide-react'
 import React from 'react'
-import '~/globals.css'
 import { buttonVariants } from './components/ui/button'
 import { MetaFunction } from '@remix-run/node'
+import { GlobalNavigationProgress } from './components/global-navigation-progress'
+
+import 'nprogress/nprogress.css'
+import '~/globals.css'
 
 export const meta: MetaFunction = () => {
   return [{ title: 'dabba' }]
@@ -55,6 +58,7 @@ const links = [
 export default function App() {
   return (
     <Document>
+      <GlobalNavigationProgress />
       <div className="flex min-h-screen flex-col bg-secondary">
         <header className="flex gap-x-8 border-b bg-background p-4">
           <Link to="/" className="flex items-center gap-x-1.5 text-xl font-medium">

package.json

@@ -25,13 +25,15 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "remix-utils": "^7.5.0",
+    "spin-delay": "^1.2.0",
     "tailwind-merge": "^2.2.0",
     "tailwindcss-animate": "^1.0.7",
     "ts-pattern": "^5.0.6",
     "zod": "^3.22.4"
   },
   "devDependencies": {
     "@remix-run/dev": "^2.4.1",
+    "@types/nprogress": "^0.2.3",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.7.4",
@@ -43,6 +45,7 @@
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "nprogress": "^0.2.0",
     "postcss": "^8.4.33",
     "prettier": "^3.1.1",
     "prettier-plugin-tailwindcss": "^0.5.11",