fix: clear stale regional map results

frontend/src/hooks/useMapThemeSelectionInsights.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { formatError } from '../lib/formatError'
 import { datasetsApi } from '../services/api/datasets'
 import type { DatasetCreateResponse, VectorSelectionBBox, VectorSelectionResponse } from '../types'
@@ -18,15 +18,20 @@ export function useMapThemeSelectionInsights<TThemeId extends string>(
   const [themeInsights, setThemeInsights] = useState<Array<MapThemeInsight<TThemeId>>>([])
   const [themeInsightsLoading, setThemeInsightsLoading] = useState(false)
   const [themeInsightsError, setThemeInsightsError] = useState<string | null>(null)
+  const requestSequence = useRef(0)
 
   useEffect(() => {
+    requestSequence.current += 1
     setThemeInsights([])
     setThemeInsightsError(null)
+    setThemeInsightsLoading(false)
   }, [selectedProjectId])
 
   const clearThemeInsights = () => {
+    requestSequence.current += 1
     setThemeInsights([])
     setThemeInsightsError(null)
+    setThemeInsightsLoading(false)
   }
 
   const loadThemeInsights = async (
@@ -40,6 +45,8 @@ export function useMapThemeSelectionInsights<TThemeId extends string>(
       return []
     }
 
+    const sequence = requestSequence.current + 1
+    requestSequence.current = sequence
     setThemeInsightsLoading(true)
     setThemeInsightsError(null)
     try {
@@ -56,6 +63,9 @@ export function useMapThemeSelectionInsights<TThemeId extends string>(
       )
       const successful = settled.flatMap((item) => (item.status === 'fulfilled' ? [item.value] : []))
       const failureCount = settled.length - successful.length
+      if (requestSequence.current !== sequence) {
+        return []
+      }
       setThemeInsights(successful)
       if (failureCount > 0) {
         setThemeInsightsError(
@@ -64,11 +74,16 @@ export function useMapThemeSelectionInsights<TThemeId extends string>(
       }
       return successful
     } catch (error) {
+      if (requestSequence.current !== sequence) {
+        return []
+      }
       setThemeInsights([])
       setThemeInsightsError(formatError(error, 'De gebiedsanalyse is mislukt.'))
       return []
     } finally {
-      setThemeInsightsLoading(false)
+      if (requestSequence.current === sequence) {
+        setThemeInsightsLoading(false)
+      }
     }
   }