From a5f4ced2602c7633d88862b5a8130796a0d6bce7 Mon Sep 17 00:00:00 2001
From: Roba Boru <robab@ethiopianairines.com>
Date: Sat, 11 Jul 2026 17:14:09 +0300
Subject: [PATCH] Fix booking widget

---
 .../portal/src/app/booking/search/page.tsx    |  5 +++-
 .../edr-passenger-web/portal/src/app/page.tsx | 30 ++++++++++++++-----
 2 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/apps/edr-passenger-web/portal/src/app/booking/search/page.tsx b/apps/edr-passenger-web/portal/src/app/booking/search/page.tsx
index 05fd3dd32..371905e11 100644
--- a/apps/edr-passenger-web/portal/src/app/booking/search/page.tsx
+++ b/apps/edr-passenger-web/portal/src/app/booking/search/page.tsx
@@ -600,7 +600,10 @@ export default function SearchPage() {
     error,
   } = useQuery<Station[]>({
     queryKey: ["stations"],
-    queryFn: async () => (await apiClient.get("/stations")) as Station[],
+    // Bounded so a stalled request surfaces the "Unable to load stations"
+    // error below instead of leaving the widget stuck loading indefinitely.
+    queryFn: async () =>
+      (await apiClient.get("/stations", { timeout: 8000 })) as Station[],
   });
 
   const {
diff --git a/apps/edr-passenger-web/portal/src/app/page.tsx b/apps/edr-passenger-web/portal/src/app/page.tsx
index b9475fc81..f77e7291d 100644
--- a/apps/edr-passenger-web/portal/src/app/page.tsx
+++ b/apps/edr-passenger-web/portal/src/app/page.tsx
@@ -38,10 +38,21 @@ async function StationsPrefetch({ children }: { children: React.ReactNode }) {
   await queryClient.prefetchQuery({
     queryKey: ['stations'],
     queryFn: async () => {
-      const res = await fetch(`${apiUrl}/stations`, { next: { revalidate: 3600 } });
+      // Caps how long the home page can be blocked on a slow/unresponsive API —
+      // without this, a hung request leaves the Suspense boundary (and the
+      // skeleton) stuck indefinitely instead of falling through to the
+      // client-side fetch, which has its own timeout and a visible error state.
+      const res = await fetch(`${apiUrl}/stations`, {
+        next: { revalidate: 3600 },
+        signal: AbortSignal.timeout(8000),
+      });
       const json = await res.json();
       return json?.data ?? json;
     },
+    // prefetchQuery defaults to 3 retries on failure — uncapped, that's up to
+    // ~24s of retries on top of the 8s timeout above before this ever resolves.
+    // Match the client's global default (providers.tsx) instead.
+    retry: 1,
   });
 
   return (
@@ -53,11 +64,16 @@ async function StationsPrefetch({ children }: { children: React.ReactNode }) {
 
 export default function Home() {
   return (
-    <Suspense fallback={<SearchFormSkeleton />}>
-      <StationsPrefetch>
-        <SearchPage />
-        <PackagesSection />
-      </StationsPrefetch>
-    </Suspense>
+    <>
+      <Suspense fallback={<SearchFormSkeleton />}>
+        <StationsPrefetch>
+          <SearchPage />
+        </StationsPrefetch>
+      </Suspense>
+      {/* Has its own independent data fetch (no dependency on stations) —
+          rendered outside the StationsPrefetch boundary so it isn't stuck
+          waiting on that fetch to resolve before it can start its own. */}
+      <PackagesSection />
+    </>
   );
 }