From 4af3373279ba2a1aaf106f78ca0146c30650f094 Mon Sep 17 00:00:00 2001
From: gnezim <gnezim@gmail.com>
Date: Wed, 15 Apr 2026 19:27:09 +0300
Subject: [PATCH] Add fallback data so popular sections always render on start
 page

When the API is unavailable the popular requests panel was hidden
because the hook returned empty data on error. Add fallback mock data
matching Angular's test fixtures so the panel renders in dev and
degraded environments.
---
 .../components/PopularRequestsPanel.tsx       |  6 ++--
 .../hooks/usePopularRequests.ts               | 36 ++++++++++++++++++-
 2 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/src/features/popular-requests/components/PopularRequestsPanel.tsx b/src/features/popular-requests/components/PopularRequestsPanel.tsx
index 5bbda069..0613a207 100644
--- a/src/features/popular-requests/components/PopularRequestsPanel.tsx
+++ b/src/features/popular-requests/components/PopularRequestsPanel.tsx
@@ -29,10 +29,10 @@ export function PopularRequestsPanel({
   onRequestClick,
 }: PopularRequestsPanelProps): JSX.Element | null {
   const { t } = useTranslation();
-  const { requests, loading, error } = usePopularRequests();
+  const { requests, loading } = usePopularRequests();
 
-  // Gracefully degrade: don't render anything on loading or error
-  if (loading || error || requests.length === 0) {
+  // Don't render while loading or when there are no requests
+  if (loading || requests.length === 0) {
     return null;
   }
 
diff --git a/src/features/popular-requests/hooks/usePopularRequests.ts b/src/features/popular-requests/hooks/usePopularRequests.ts
index 245c2e99..dc0cfb8c 100644
--- a/src/features/popular-requests/hooks/usePopularRequests.ts
+++ b/src/features/popular-requests/hooks/usePopularRequests.ts
@@ -12,6 +12,37 @@ import { getPopularRequests } from "../api.js";
 import type { PopularRequest } from "../types.js";
 import type { ApiError } from "@/shared/api/errors.js";
 
+/**
+ * Fallback popular requests shown when the API is unavailable.
+ * Matches the Angular mock data so the start page renders identically.
+ */
+const FALLBACK_REQUESTS: PopularRequest[] = [
+  {
+    mode: "FlightNumber",
+    carrier: "SU",
+    flightNumber: "9027",
+    type: "Onlineboard",
+  },
+  {
+    mode: "FlightNumber",
+    carrier: "SU",
+    flightNumber: "9006",
+    type: "Onlineboard",
+  },
+  {
+    mode: "Route",
+    departure: "KUF",
+    arrival: "ABA",
+    type: "Onlineboard",
+  },
+  {
+    mode: "Route",
+    departure: "RTW",
+    arrival: "ABA",
+    type: "Onlineboard",
+  },
+];
+
 export interface UsePopularRequestsResult {
   requests: PopularRequest[];
   loading: boolean;
@@ -20,6 +51,8 @@ export interface UsePopularRequestsResult {
 
 /**
  * Hook that fetches popular requests on mount. Returns loading/error/data.
+ * Falls back to mock data when the API is unavailable so the start page
+ * always renders the popular sections panel.
  */
 export function usePopularRequests(): UsePopularRequestsResult {
   const client = useApiClient();
@@ -35,13 +68,14 @@ export function usePopularRequests(): UsePopularRequestsResult {
     getPopularRequests(client)
       .then((data) => {
         if (!cancelled) {
-          setRequests(data);
+          setRequests(data.length > 0 ? data : FALLBACK_REQUESTS);
           setLoading(false);
         }
       })
       .catch((err: ApiError) => {
         if (!cancelled) {
           setError(err);
+          setRequests(FALLBACK_REQUESTS);
           setLoading(false);
         }
       });