From a8189d1b9e7474b96daa77afd31c420ba40b023e Mon Sep 17 00:00:00 2001
From: braddf <bradbdf@gmail.com>
Date: Fri, 23 Feb 2024 12:33:46 +0000
Subject: [PATCH] Improve bugfix for map flashing issue

---
 .../components/helpers/mapUtils.ts            | 24 ++++++++++++-------
 apps/nowcasting-app/pages/index.tsx           | 10 ++++++++
 2 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/apps/nowcasting-app/components/helpers/mapUtils.ts b/apps/nowcasting-app/components/helpers/mapUtils.ts
index f95bdee6..539b00fc 100644
--- a/apps/nowcasting-app/components/helpers/mapUtils.ts
+++ b/apps/nowcasting-app/components/helpers/mapUtils.ts
@@ -12,22 +12,28 @@ export const safelyUpdateMapData = (
     !map.isStyleLoaded()
   ) {
     if (!map.isStyleLoaded()) {
-      // Check if we've already set a timeout for this map
+      console.warn("📍map style not loaded yet, skipping update");
+      // -- Check if we've already set a timeout for this map and therefore a check is already pending
       const existingTimeout = localStorage.getItem(
         `MapTimeoutId-${map.getContainer().dataset.title}`
       );
-      // If we have, clear it
+      // -- If we have, skip the update and return
       if (existingTimeout) {
-        // console.log(`clearing existing map timeout for ${map.getContainer().dataset.title}`);
-        clearTimeout(Number(existingTimeout));
+        console.debug("existing timeout running, skipping");
+        return;
       }
-      // Set a new timeout to check if the map is ready and update the data
-      // console.log(`setting new map timeout for ${map.getContainer().dataset.title}`, newTimeout);
+      // -- Set a new timeout to check whether the map is ready and update the data
+      console.debug(`setting new map timeout for ${map.getContainer().dataset.title}`);
       const newTimeout = setTimeout(() => {
-        // console.warn("map is not style loaded, trying again");
         safelyUpdateMapData(map, updateMapData);
+        // console.log(`clearing new map timeout for ${map.getContainer().dataset.title}`);
+        localStorage.removeItem(`MapTimeoutId-${map.getContainer().dataset.title}`);
       }, 500);
-      // Save the timeout id to local storage
+      // -- Save the timeout id to local storage
+      console.debug(
+        `saving new map timeout id for ${map.getContainer().dataset.title}`,
+        newTimeout
+      );
       localStorage.setItem(
         `MapTimeoutId-${map.getContainer().dataset.title}`,
         newTimeout.toString()
@@ -35,7 +41,7 @@ export const safelyUpdateMapData = (
     }
     return;
   } else {
-    console.warn("🎉 map is ready, updating data");
+    console.debug("🎉 map is ready, updating data");
     updateMapData(map);
   }
 };
diff --git a/apps/nowcasting-app/pages/index.tsx b/apps/nowcasting-app/pages/index.tsx
index 67e46395..513acd8e 100644
--- a/apps/nowcasting-app/pages/index.tsx
+++ b/apps/nowcasting-app/pages/index.tsx
@@ -129,6 +129,16 @@ export default function Home({ dashboardModeServer }: { dashboardModeServer: str
     });
   }, [view, maps]);
 
+  useEffect(() => {
+    // Clear any previous map timeouts on initial page load
+    for (const map of maps) {
+      localStorage.getItem(`MapTimeoutId-${map.getContainer().dataset.title}`) &&
+        clearTimeout(
+          Number(localStorage.getItem(`MapTimeoutId-${map.getContainer().dataset.title}`))
+        );
+    }
+  }, [maps]);
+
   useEffect(() => {
     maps.forEach((map) => {
       console.log("-- -- -- resizing map");