perf(bus-map): load static route data instantly in 0ms and sync backend silently in background

src/pages/BusRoutes/BusRoutes.tsx

@@ -15,33 +15,31 @@ export default function BusRoutes() {
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
 
   useEffect(() => {
-    setLoadingBus(true);
+    // 1. Instantly load static bus routes (0ms loading delay)
-    fetch(getBackendUrl('/api/bus-routes'))
+    fetch('/bus_routes.json')
-      .then((res) => {
+      .then((res) => res.json())
-        if (!res.ok) throw new Error('Backend offline');
-        return res.json();
-      })
       .then((data) => {
-        if (data && data.length > 0) {
+        if (Array.isArray(data) && data.length > 0) {
           setBusRoutes(data);
           setSelectedBusRoute(data[0]);
-        } else {
-          throw new Error('Empty data');
         }
-        setLoadingBus(false);
       })
-      .catch(() => {
+      .catch((err) => console.error('Local JSON load error:', err))
-        fetch('/bus_routes.json')
+      .finally(() => setLoadingBus(false));
-          .then((res) => res.json())
+
-          .then((data) => {
+    // 2. Silently fetch live backend updates in background with a 2s timeout
-            setBusRoutes(data);
+    const controller = new AbortController();
-            setSelectedBusRoute(data[0]);
+    const timeoutId = setTimeout(() => controller.abort(), 2000);
-          })
+
-          .catch((err) => console.error('Fallback fetch error:', err))
+    fetch(getBackendUrl('/api/bus-routes'), { signal: controller.signal })
-          .finally(() => {
+      .then((res) => (res.ok ? res.json() : null))
-            setLoadingBus(false);
+      .then((data) => {
-          });
+        if (Array.isArray(data) && data.length > 0) {
-      });
+          setBusRoutes(data);
+        }
+      })
+      .catch(() => {})
+      .finally(() => clearTimeout(timeoutId));
   }, []);
 
   const filteredRoutes = busRoutes.filter(