Merge pull request #638 from Tria-plc/alpha

Fix booking widget

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 {

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 />
+    </>
   );
 }