add epic progress bar

app/components/progess-bar.tsx

@@ -0,0 +1,58 @@
+import { useNavigation } from '@remix-run/react'
+import React, { useEffect, useRef, useState } from 'react'
+import { useSpinDelay } from 'spin-delay'
+import { cn } from '#app/utils/misc.tsx'
+import { Spinner } from './spinner.tsx'
+
+function EpicProgress() {
+	const transition = useNavigation()
+	const busy = transition.state !== 'idle'
+	const delayedPending = useSpinDelay(busy, {
+		delay: 400,
+		minDuration: 300,
+	})
+	const ref = useRef<HTMLDivElement>(null)
+	const [animationComplete, setAnimationComplete] = useState(true)
+
+	useEffect(() => {
+		if (!ref.current) return
+		if (delayedPending) setAnimationComplete(false)
+
+		const animationPromises = ref.current
+			.getAnimations()
+			.map(({ finished }) => finished)
+
+		Promise.allSettled(animationPromises).then(() => {
+			if (!delayedPending) setAnimationComplete(true)
+		})
+	}, [delayedPending])
+
+	return (
+		<div
+			role="progressbar"
+			aria-hidden={!delayedPending}
+			aria-valuetext={delayedPending ? 'Loading' : undefined}
+			className="fixed inset-x-0 left-0 top-0 z-50 h-[0.20rem] animate-pulse"
+		>
+			<div
+				ref={ref}
+				className={cn(
+					'h-full bg-blue-600 transition-all duration-300 ease-in-out',
+					transition.state === 'idle' &&
+						animationComplete &&
+						'w-0 opacity-0 transition-none',
+					transition.state === 'submitting' && 'w-1/12',
+					transition.state === 'loading' && 'w-2/12',
+					transition.state === 'idle' && !animationComplete && 'w-full',
+				)}
+			/>
+			{delayedPending && (
+				<div className="absolute inset-0 flex items-center justify-center">
+					<Spinner showSpinner={true} className="text-blue-600" />
+				</div>
+			)}
+		</div>
+	)
+}
+
+export { EpicProgress }

app/components/spinner.tsx

@@ -1,12 +1,20 @@
-export function Spinner({ showSpinner }: { showSpinner: boolean }) {
+import { cn } from '#app/utils/misc.tsx'
+
+export function Spinner({
+	showSpinner,
+	className = '',
+}: {
+	showSpinner: boolean
+	className?: string
+}) {
 	return (
 		<div
 			className={`absolute right-0 top-[6px] transition-opacity ${
 				showSpinner ? 'opacity-100' : 'opacity-0'
 			}`}
 		>
 			<svg
-				className="-ml-1 mr-3 h-5 w-5 animate-spin"
+				className={cn('-ml-1 mr-3 h-5 w-5 animate-spin', className)}
 				xmlns="http://www.w3.org/2000/svg"
 				fill="none"
 				viewBox="0 0 24 24"

app/root.tsx

@@ -29,6 +29,7 @@ import { z } from 'zod'
 import { Confetti } from './components/confetti.tsx'
 import { GeneralErrorBoundary } from './components/error-boundary.tsx'
 import { ErrorList } from './components/forms.tsx'
+import { EpicProgress } from './components/progess-bar.tsx'
 import { SearchBar } from './components/search-bar.tsx'
 import { EpicToaster } from './components/toaster.tsx'
 import { Button } from './components/ui/button.tsx'
@@ -47,11 +48,7 @@ import { ClientHintCheck, getHints, useHints } from './utils/client-hints.tsx'
 import { getConfetti } from './utils/confetti.server.ts'
 import { prisma } from './utils/db.server.ts'
 import { getEnv } from './utils/env.server.ts'
-import {
-	combineHeaders,
-	getDomainUrl,
-	getUserImgSrc,
-} from './utils/misc.tsx'
+import { combineHeaders, getDomainUrl, getUserImgSrc } from './utils/misc.tsx'
 import { useNonce } from './utils/nonce-provider.ts'
 import { useRequestInfo } from './utils/request-info.ts'
 import { type Theme, setTheme, getTheme } from './utils/theme.server.ts'
@@ -273,6 +270,7 @@ function App() {
 			</div>
 			<Confetti id={data.confettiId} />
 			<EpicToaster toast={data.toast} />
+			<EpicProgress/>
 		</Document>
 	)
 }