From 6ff68731644f5877a7ede3dd67d5549e5c78be53 Mon Sep 17 00:00:00 2001
From: Aurora Scharff <aurora.sofie@gmail.com>
Date: Fri, 25 Sep 2026 08:30:44 +0200
Subject: [PATCH 1/2] Show loading state while retrying errors

---
 components/ui/error-state.tsx | 36 +++++++++++++++++++++++++++++------
 1 file changed, 30 insertions(+), 6 deletions(-)

diff --git a/components/ui/error-state.tsx b/components/ui/error-state.tsx
index c9381c8..ea10be0 100644
--- a/components/ui/error-state.tsx
+++ b/components/ui/error-state.tsx
@@ -1,9 +1,37 @@
 'use client';
 
+import { useTransition } from 'react';
 import { BrandMark } from '@/components/ui/brand-mark';
 import { Button } from '@/components/ui/button';
+import { Spinner } from '@/components/ui/spinner';
 import { cn } from '@/lib/utils';
 
+function RetryButton({
+  className,
+  onRetry,
+  size,
+}: {
+  className?: string;
+  onRetry: () => void;
+  size?: 'sm';
+}) {
+  const [isPending, startTransition] = useTransition();
+
+  return (
+    <Button
+      aria-busy={isPending}
+      className={className}
+      disabled={isPending}
+      onClick={() => startTransition(() => onRetry())}
+      size={size}
+      variant="secondary"
+    >
+      {isPending && <Spinner />}
+      {isPending ? 'Retrying…' : 'Try again'}
+    </Button>
+  );
+}
+
 export function ErrorState({
   body,
   className,
@@ -24,9 +52,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>
+          <RetryButton className="mt-1" onRetry={onRetry} />
         </div>
       </main>
     );
@@ -42,9 +68,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>
+      <RetryButton onRetry={onRetry} size="sm" />
     </div>
   );
 }

From b07cfd45553d820d12b41353c667606549fe21de Mon Sep 17 00:00:00 2001
From: Aurora Scharff <aurora.sofie@gmail.com>
Date: Fri, 25 Sep 2026 08:35:42 +0200
Subject: [PATCH 2/2] Inline retry pending state

---
 app/(travel)/book/[flightId]/[step]/error.tsx | 19 +++++++++-
 app/(travel)/error.tsx                        | 19 +++++++++-
 app/error.tsx                                 | 19 +++++++++-
 components/ui/error-boundary.tsx              | 19 +++++++++-
 components/ui/error-state.tsx                 | 38 +++----------------
 5 files changed, 73 insertions(+), 41 deletions(-)

diff --git a/app/(travel)/book/[flightId]/[step]/error.tsx b/app/(travel)/book/[flightId]/[step]/error.tsx
index 627d0a2..1c72928 100644
--- a/app/(travel)/book/[flightId]/[step]/error.tsx
+++ b/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>
   );
 }
diff --git a/app/(travel)/error.tsx b/app/(travel)/error.tsx
index 0bbe5fc..b543864 100644
--- a/app/(travel)/error.tsx
+++ b/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>
   );
 }
diff --git a/app/error.tsx b/app/error.tsx
index fd2a627..8a521e9 100644
--- a/app/error.tsx
+++ b/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>
   );
 }
diff --git a/components/ui/error-boundary.tsx b/components/ui/error-boundary.tsx
index 1bc4425..88c5e94 100644
--- a/components/ui/error-boundary.tsx
+++ b/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>
   );
 }
 
diff --git a/components/ui/error-state.tsx b/components/ui/error-state.tsx
index ea10be0..043ab56 100644
--- a/components/ui/error-state.tsx
+++ b/components/ui/error-state.tsx
@@ -1,47 +1,19 @@
 'use client';
 
-import { useTransition } from 'react';
+import type { ReactNode } from 'react';
 import { BrandMark } from '@/components/ui/brand-mark';
-import { Button } from '@/components/ui/button';
-import { Spinner } from '@/components/ui/spinner';
 import { cn } from '@/lib/utils';
 
-function RetryButton({
-  className,
-  onRetry,
-  size,
-}: {
-  className?: string;
-  onRetry: () => void;
-  size?: 'sm';
-}) {
-  const [isPending, startTransition] = useTransition();
-
-  return (
-    <Button
-      aria-busy={isPending}
-      className={className}
-      disabled={isPending}
-      onClick={() => startTransition(() => onRetry())}
-      size={size}
-      variant="secondary"
-    >
-      {isPending && <Spinner />}
-      {isPending ? 'Retrying…' : 'Try again'}
-    </Button>
-  );
-}
-
 export function ErrorState({
   body,
+  children,
   className,
-  onRetry,
   title,
   variant = 'section',
 }: {
   body: string;
+  children: ReactNode;
   className?: string;
-  onRetry: () => void;
   title: string;
   variant?: 'page' | 'section';
 }) {
@@ -52,7 +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>
-          <RetryButton className="mt-1" onRetry={onRetry} />
+          <div className="mt-1">{children}</div>
         </div>
       </main>
     );
@@ -68,7 +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>
-      <RetryButton onRetry={onRetry} size="sm" />
+      {children}
     </div>
   );
 }