Show loading state while retrying errors

app/(travel)/book/[flightId]/[step]/error.tsx

@@ -1,13 +1,28 @@
 'use client';
 
+import { useTransition } from 'react';
+import { Button } from '@/components/ui/button';
 import { ErrorState } from '@/components/ui/error-state';
+import { Spinner } from '@/components/ui/spinner';
 
 export default function Error({ retry }: { error: Error & { digest?: string }; retry: () => void }) {
+  const [isPending, startTransition] = useTransition();
+
   return (
     <ErrorState
       body="Your choices are still in the URL, so it is safe to try again."
-      onRetry={retry}
       title="The booking could not be loaded"
-    />
+    >
+      <Button
+        onClick={() => startTransition(() => retry())}
+        disabled={isPending}
+        aria-busy={isPending}
+        size="sm"
+        variant="secondary"
+      >
+        {isPending && <Spinner />}
+        {isPending ? 'Retrying…' : 'Try again'}
+      </Button>
+    </ErrorState>
   );
 }

app/(travel)/error.tsx

@@ -1,15 +1,30 @@
 'use client';
 
+import { useTransition } from 'react';
+import { Button } from '@/components/ui/button';
 import { ErrorState } from '@/components/ui/error-state';
+import { Spinner } from '@/components/ui/spinner';
 
 export default function Error({ retry }: { error: Error & { digest?: string }; retry: () => void }) {
+  const [isPending, startTransition] = useTransition();
+
   return (
     <ErrorState
       body="This page could not be loaded. It is safe to try again."
       className="min-h-[calc(100dvh-3.5rem)]"
-      onRetry={retry}
       title="Something went wrong."
       variant="page"
-    />
+    >
+      <Button
+        onClick={() => startTransition(() => retry())}
+        disabled={isPending}
+        aria-busy={isPending}
+        size="sm"
+        variant="secondary"
+      >
+        {isPending && <Spinner />}
+        {isPending ? 'Retrying…' : 'Try again'}
+      </Button>
+    </ErrorState>
   );
 }

app/error.tsx

@@ -1,15 +1,30 @@
 'use client';
 
+import { useTransition } from 'react';
+import { Button } from '@/components/ui/button';
 import { ErrorState } from '@/components/ui/error-state';
+import { Spinner } from '@/components/ui/spinner';
 
 export default function Error({ retry }: { error: Error & { digest?: string }; retry: () => void }) {
+  const [isPending, startTransition] = useTransition();
+
   return (
     <ErrorState
       body="This page could not be loaded. It is safe to try again."
       className="min-h-dvh"
-      onRetry={retry}
       title="Something went wrong."
       variant="page"
-    />
+    >
+      <Button
+        onClick={() => startTransition(() => retry())}
+        disabled={isPending}
+        aria-busy={isPending}
+        size="sm"
+        variant="secondary"
+      >
+        {isPending && <Spinner />}
+        {isPending ? 'Retrying…' : 'Try again'}
+      </Button>
+    </ErrorState>
   );
 }

components/ui/error-boundary.tsx

@@ -1,15 +1,30 @@
 'use client';
 
 import { catchError, type ErrorInfo } from 'next/error';
+import { useTransition } from 'react';
+import { Button } from '@/components/ui/button';
 import { ErrorState } from '@/components/ui/error-state';
+import { Spinner } from '@/components/ui/spinner';
 
 function ErrorFallback(props: { title?: string }, { retry }: ErrorInfo) {
+  const [isPending, startTransition] = useTransition();
+
   return (
     <ErrorState
       body="This section could not be loaded."
-      onRetry={retry}
       title={props.title ?? 'Something went wrong'}
-    />
+    >
+      <Button
+        onClick={() => startTransition(() => retry())}
+        disabled={isPending}
+        aria-busy={isPending}
+        size="sm"
+        variant="secondary"
+      >
+        {isPending && <Spinner />}
+        {isPending ? 'Retrying…' : 'Try again'}
+      </Button>
+    </ErrorState>
   );
 }
 

components/ui/error-state.tsx

@@ -1,19 +1,19 @@
 'use client';
 
+import type { ReactNode } from 'react';
 import { BrandMark } from '@/components/ui/brand-mark';
-import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 
 export function ErrorState({
   body,
+  children,
   className,
-  onRetry,
   title,
   variant = 'section',
 }: {
   body: string;
+  children: ReactNode;
   className?: string;
-  onRetry: () => void;
   title: string;
   variant?: 'page' | 'section';
 }) {
@@ -24,9 +24,7 @@ export function ErrorState({
           <BrandMark animated className="text-accent mb-1 size-10" />
           <h1 className="text-xl font-semibold tracking-tight">{title}</h1>
           <p className="text-muted text-sm leading-6">{body}</p>
-          <Button className="mt-1" onClick={onRetry} variant="secondary">
-            Try again
-          </Button>
+          <div className="mt-1">{children}</div>
         </div>
       </main>
     );
@@ -42,9 +40,7 @@ export function ErrorState({
       <BrandMark className="text-divider dark:text-divider-dark size-8" />
       <p className="text-sm font-medium text-black dark:text-white">{title}</p>
       <p className="text-muted max-w-xs text-sm">{body}</p>
-      <Button onClick={onRetry} size="sm" variant="secondary">
-        Try again
-      </Button>
+      {children}
     </div>
   );
 }