From db6be73a1cdc4eb1bbf0fea11ad3a02ed8e678e8 Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Sat, 22 Nov 2025 12:29:35 -0600
Subject: [PATCH] fix: eagerly load map caches in browser and use Suspense
 pattern
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix race condition where WORLD_MAP/USA_MAP Proxies were accessed before
map data finished loading in the browser. The previous implementation
only loaded the map sources but didn't populate the MapData caches.

Changes:
- Browser now eagerly loads both map sources AND populates both caches
- Store loading promise and throw it from getMapDataSync() if not ready
- This triggers React Suspense to show loading state instead of crashing
- Fixes production error: "world map not yet loaded" in browser console

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../src/arcade-games/know-your-world/maps.ts  | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/arcade-games/know-your-world/maps.ts b/apps/web/src/arcade-games/know-your-world/maps.ts
index d4f2d6e9..7c5d56c6 100644
--- a/apps/web/src/arcade-games/know-your-world/maps.ts
+++ b/apps/web/src/arcade-games/know-your-world/maps.ts
@@ -46,10 +46,17 @@ async function ensureMapSourcesLoaded(): Promise<void> {
  * In browser context, load maps immediately at module initialization
  * This allows synchronous access in client components
  */
+let browserMapsLoadingPromise: Promise<void> | null = null
 if (typeof window !== 'undefined') {
-  // Browser: Start loading immediately
-  ensureMapSourcesLoaded().catch(err => {
+  // Browser: Start loading immediately and cache the promise
+  browserMapsLoadingPromise = (async () => {
+    await ensureMapSourcesLoaded()
+    // Populate the caches eagerly
+    await getWorldMapData()
+    await getUSAMapData()
+  })().catch(err => {
     console.error('[Maps] Failed to load map data in browser:', err)
+    throw err
   })
 }
 
@@ -363,13 +370,19 @@ async function getUSAMapData(): Promise<MapData> {
 
 /**
  * Get map data synchronously (for client components)
- * Throws if maps aren't loaded yet
+ * In browser, throws a promise to trigger React Suspense if not loaded yet
  */
 function getMapDataSync(mapId: 'world' | 'usa'): MapData {
   const cache = mapId === 'world' ? worldMapDataCache : usaMapDataCache
+
   if (!cache) {
+    // In browser, if maps are still loading, throw the promise to trigger Suspense
+    if (typeof window !== 'undefined' && browserMapsLoadingPromise) {
+      throw browserMapsLoadingPromise
+    }
     throw new Error(`[Maps] ${mapId} map not yet loaded. Use await getMapData() or ensure maps are preloaded.`)
   }
+
   return cache
 }