From 08a5f5e2bd7579853e05efde91b3c2a894d4b0a1 Mon Sep 17 00:00:00 2001
From: braddf <info@bradfulford.co.uk>
Date: Mon, 22 Jun 2026 07:07:08 +0100
Subject: [PATCH] feat: debounce map loading spinner to avoid flash on cached
 timesteps

---
 .../components/map/pvLatestMap.tsx            | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/apps/nowcasting-app/components/map/pvLatestMap.tsx b/apps/nowcasting-app/components/map/pvLatestMap.tsx
index dcd4e039..60290671 100644
--- a/apps/nowcasting-app/components/map/pvLatestMap.tsx
+++ b/apps/nowcasting-app/components/map/pvLatestMap.tsx
@@ -497,13 +497,27 @@ const PvLatestMap: React.FC<PvLatestMapProps> = ({
     };
   }, [mapDataLoading]);
 
+  // Debounce the spinner so it only shows for data loads, not the brief
+  // mapDataLoading rerender that happens when flipping between already-cached
+  // timesteps. If loading resolves within the threshold (cached re-render),
+  // the spinner never appears.
+  const isLoading =
+    !combinedData.allGspForecastData || combinedLoading.allGspForecastLoading || mapDataLoading;
+  const [showSpinner, setShowSpinner] = useState(false);
+  useEffect(() => {
+    if (!isLoading) {
+      setShowSpinner(false);
+      return;
+    }
+    const t = setTimeout(() => setShowSpinner(true), 700);
+    return () => clearTimeout(t);
+  }, [isLoading]);
+
   return (
     <div className={`pv-map relative h-full w-full ${className}`}>
       {
         <>
-          {(!combinedData.allGspForecastData ||
-            combinedLoading.allGspForecastLoading ||
-            mapDataLoading) && (
+          {showSpinner && (
             <LoadStateMap>
               <Spinner />
             </LoadStateMap>