fix: isolate regional project context

frontend/src/hooks/useProjectWorkspace.ts

@@ -1,4 +1,4 @@
-import { FormEvent, useMemo, useState } from 'react'
+import { FormEvent, useMemo, useRef, useState } from 'react'
 import {
   PRIMARY_FOCUS_AREA_GEOJSON,
   PRIMARY_FOCUS_AREA_NAME,
@@ -46,6 +46,7 @@ export function useProjectWorkspace() {
   const [loadingAreas, setLoadingAreas] = useState(false)
   const [loadingDatasets, setLoadingDatasets] = useState(false)
   const [errorMessage, setErrorMessage] = useState<string | null>(null)
+  const projectDataRequestSequence = useRef(0)
 
   const [projectForm, setProjectForm] = useState<ProjectCreate>({
     name: '',
@@ -145,20 +146,28 @@ export function useProjectWorkspace() {
   }
 
   const loadProjectData = async (projectId: string) => {
+    const requestId = ++projectDataRequestSequence.current
     setLoadingAreas(true)
     setLoadingDatasets(true)
     setErrorMessage(null)
     try {
       const projectData = await fetchProjectData(projectId)
+      if (requestId !== projectDataRequestSequence.current) {
+        return null
+      }
       setAreas(projectData.areas)
       setDatasets(projectData.datasets)
       return projectData
     } catch (error) {
-      setErrorMessage(error instanceof Error ? error.message : 'Failed to load project data')
+      if (requestId === projectDataRequestSequence.current) {
+        setErrorMessage(error instanceof Error ? error.message : 'Failed to load project data')
+      }
       return null
     } finally {
-      setLoadingAreas(false)
-      setLoadingDatasets(false)
+      if (requestId === projectDataRequestSequence.current) {
+        setLoadingAreas(false)
+        setLoadingDatasets(false)
+      }
     }
   }
 
@@ -209,6 +218,7 @@ export function useProjectWorkspace() {
   }
 
   const resetProjectData = () => {
+    projectDataRequestSequence.current += 1
     setAreas([])
     setDatasets([])
   }