From a54e5bf0b64cad37c407f80695d714b4833feeac Mon Sep 17 00:00:00 2001
From: furyhawk <furyx@hotmail.com>
Date: Thu, 23 Apr 2026 21:29:52 +0800
Subject: [PATCH] Fix WeatherMap lazy loading conflict: Import directly instead
 of lazy-loading

---
 frontend/src/routes/_layout/weather-hub.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/routes/_layout/weather-hub.tsx b/frontend/src/routes/_layout/weather-hub.tsx
index 08b5a00..5a52022 100644
--- a/frontend/src/routes/_layout/weather-hub.tsx
+++ b/frontend/src/routes/_layout/weather-hub.tsx
@@ -8,7 +8,9 @@ const AirTemperature = React.lazy(() => import('@/components/weather/AirTemperat
 const FourDayOutlook = React.lazy(() => import('@/components/weather/FourDayOutlook'));
 const WeatherStatistics = React.lazy(() => import('@/components/weather/WeatherStatistics'));
 const WindDirection = React.lazy(() => import('@/components/weather/WindDirection'));
-const WeatherMap = React.lazy(() => import('@/components/weather/WeatherMap'));
+// Note: WeatherMap is NOT lazy-loaded here because it's directly imported by TwoHourForecast
+// Lazy-loading it here would cause React to treat it as a different component instance
+import WeatherMap from '@/components/weather/WeatherMap';
 
 const tabValues = {
   twoHour: 'twoHourForecast',
@@ -71,9 +73,7 @@ function WeatherHub() {
             </React.Suspense>
           </ChakraTabs.Content>
           <ChakraTabs.Content value={tabValues.weatherMap}>
-            <React.Suspense fallback={<Box>Loading map...</Box>}>
-              <WeatherMap />
-            </React.Suspense>
+            <WeatherMap />
           </ChakraTabs.Content>
         </ChakraTabs.ContentGroup>
       </ChakraTabs.Root>