From fe1fbca07a7b0694a945ff371af27f987b9ecbe0 Mon Sep 17 00:00:00 2001
From: furyhawk <furyx@hotmail.com>
Date: Wed, 28 May 2025 20:26:50 +0800
Subject: [PATCH] refactor: Add MapInvalidator component to handle map size
 invalidation on tab visibility

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

diff --git a/frontend/src/routes/_layout/weather-hub.tsx b/frontend/src/routes/_layout/weather-hub.tsx
index a90473b..63e1d3b 100644
--- a/frontend/src/routes/_layout/weather-hub.tsx
+++ b/frontend/src/routes/_layout/weather-hub.tsx
@@ -1,5 +1,5 @@
 // filepath: /home/user/projects/home_stack/frontend/src/routes/_layout/weather-hub.tsx
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import {
     Box,
     Container,
@@ -20,7 +20,7 @@ import {
 import { createFileRoute } from "@tanstack/react-router"
 import { useQuery } from "@tanstack/react-query"
 import { createListCollection } from "@ark-ui/react"
-import { MapContainer, TileLayer, Marker } from "react-leaflet";
+import { MapContainer, TileLayer, Marker, useMap } from "react-leaflet";
 import L from "leaflet";
 import "leaflet/dist/leaflet.css";
 
@@ -622,6 +622,22 @@ function WindDirection() {
     )
 }
 
+// Component to handle map invalidation when tab becomes visible
+function MapInvalidator() {
+    const map = useMap();
+    
+    useEffect(() => {
+        // Small delay to ensure the container is fully visible
+        const timer = setTimeout(() => {
+            map.invalidateSize();
+        }, 100);
+        
+        return () => clearTimeout(timer);
+    }, [map]);
+    
+    return null;
+}
+
 function WeatherMap() {
     // Fetch air temperature data
     const { data: tempData, isLoading: tempLoading, error: tempError } = useQuery<ApiNestedResponse<AirTemperaturePayload>>({
@@ -689,6 +705,7 @@ function WeatherMap() {
 
     return (
         <MapContainer center={[1.3521, 103.8198]} zoom={11} style={{ height: "500px", width: "100%" }}>
+            <MapInvalidator />
             <TileLayer
                 url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                 attribution="&copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors"