From 6069846f6e0be1e54a2bd1adf5ceebe52bdf5fb4 Mon Sep 17 00:00:00 2001
From: Natalie Rose <natalie@omg.lol>
Date: Mon, 28 Sep 2026 18:44:18 +1000
Subject: [PATCH] Fix starmap flashing

---
 app/components/starMap.tsx | 16 ++--------------
 app/queries/map.ts         | 10 +++++++++-
 2 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/app/components/starMap.tsx b/app/components/starMap.tsx
index 22d2ee8f..13862000 100644
--- a/app/components/starMap.tsx
+++ b/app/components/starMap.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useMemo, useRef } from 'react';
 import { observer } from 'mobx-react';
 import environment from 'app/environment';
 import MapViewport from 'app/components/map/mapViewport';
@@ -8,7 +8,6 @@ import { useDraggableMap } from 'app/components/map/useDraggableMap';
 import { useStarMapQuery } from 'app/queries/map';
 import { CoordPoint, pxBoundsToCoordBounds } from 'app/helpers/map';
 import StarMapViewStore from 'app/stores/starMapView';
-import { StarMapGrid as StarData } from 'app/helpers/starMap';
 import MapControls from 'app/components/map/mapControls';
 
 type Props = {
@@ -23,8 +22,6 @@ type Props = {
 const StarMap: React.FunctionComponent<Props> = ({ initialCenter }) => {
   const draggable = useDraggableMap({ kind: 'star' });
   const isFirstJumpRef = useRef(true);
-  const [starData, setStarData] = useState<StarData>({});
-  const [previousStarData, setPreviousStarData] = useState<StarData>({});
 
   // Centers on the current planet's star the moment this mounts (i.e. every time the user switches
   // into star map mode) - no flash, since initialCenter is available on the very first render.
@@ -56,22 +53,13 @@ const StarMap: React.FunctionComponent<Props> = ({ initialCenter }) => {
 
   const { grid } = useStarMapQuery(viewBounds);
 
-  if (grid !== previousStarData && Object.keys(grid).length > 0) {
-    setStarData(grid);
-    setPreviousStarData(grid);
-  }
-
   return (
     <div className='bulma'>
       <MapViewport
         draggable={draggable}
         background={`${environment.getAssetsUrl()}star_system/field.png`}
       >
-        <StarMapGrid
-          grid={starData ?? []}
-          tileSize={draggable.tileSize}
-          isDragging={draggable.isDragging}
-        />
+        <StarMapGrid grid={grid} tileSize={draggable.tileSize} isDragging={draggable.isDragging} />
       </MapViewport>
       <ZoomControls kind='star' zoom={draggable.zoom} setZoom={draggable.setZoom} />
       <MapControls kind='star' />
diff --git a/app/queries/map.ts b/app/queries/map.ts
index c89d7f23..99712223 100644
--- a/app/queries/map.ts
+++ b/app/queries/map.ts
@@ -1,4 +1,4 @@
-import { useQueries, useQuery } from '@tanstack/react-query';
+import { keepPreviousData, useQueries, useQuery } from '@tanstack/react-query';
 import { useMemo } from 'react';
 import lacuna from 'app/lacuna';
 import queryKeys from 'app/queryKeys';
@@ -39,6 +39,7 @@ export const useStarMapRegionQuery = (bounds: StarMapBounds) =>
   useQuery({
     queryKey: queryKeys.map.stars(bounds),
     queryFn: () => getStarMap(bounds),
+    placeholderData: keepPreviousData,
   });
 
 //
@@ -56,10 +57,17 @@ export const useStarMapQuery = (viewBounds: StarMapBounds) => {
 
   const chunks = useMemo(() => splitStarMapBounds(bufferedBounds), [bufferedBounds]);
 
+  // Panning changes the bounds - and therefore the query key - for every chunk on almost every
+  // drag. Without `keepPreviousData`, each chunk's `data` would go undefined the instant its key
+  // changes, so the merged grid below would momentarily lose whatever that chunk had already
+  // loaded (and, with multiple chunks, different chunks resolve at different times), flashing
+  // already-visible stars off and back on. Keeping the previous chunk's data as a placeholder
+  // avoids that gap entirely.
   const results = useQueries({
     queries: chunks.map((bounds) => ({
       queryKey: queryKeys.map.stars(bounds),
       queryFn: () => getStarMap(bounds),
+      placeholderData: keepPreviousData,
     })),
   });
 
-- 
2.51.2