Show loading spinner and keep prior pins during viewport fetches (#4)

Two map UX tweaks:

- Overlay an ActivityIndicator while we're waiting on the initial
  position fix so the 1–2s of dead air before the fly-to no longer
  looks like the app froze.
- Accumulate elements across viewport fetches into a Map<id, Element>
  and render from that, so previously-shown pins stay on the map while
  a new bounds fetch is in flight. Fine for our small per-user dataset.

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: dfalling

src/map/MapScreen.tsx

@@ -8,14 +8,17 @@ import {
   useCurrentPosition,
   type ViewStateChangeEvent,
 } from '@maplibre/maplibre-react-native';
-import {useCallback, useEffect, useRef, useState} from 'react';
+import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import type {NativeSyntheticEvent} from 'react-native';
-import {StyleSheet, Text, View} from 'react-native';
+import {ActivityIndicator, StyleSheet, Text, View} from 'react-native';
 import {
+  type ElementsQuery,
   type ElementsQueryVariables,
   useElementsQuery,
 } from '../graphql/__generated__/types';
 
+type ElementWithLocation = ElementsQuery['elements'][number];
+
 const MAP_STYLE = 'https://tiles.openfreemap.org/styles/liberty';
 const USER_ZOOM = 14;
 
@@ -67,6 +70,26 @@ export function MapScreen() {
     variables: bounds ? {bounds} : undefined,
   });
 
+  // Accumulate elements across viewport fetches so pins persist while a new
+  // search is in flight. Fine for our small per-user dataset; revisit if we
+  // ever need eviction or to reflect server-side deletes.
+  const [elementsById, setElementsById] = useState<
+    ReadonlyMap<string, ElementWithLocation>
+  >(new Map());
+  useEffect(() => {
+    if (!data?.elements) return;
+    setElementsById(prev => {
+      const next = new Map(prev);
+      for (const el of data.elements) next.set(el.id, el);
+      return next;
+    });
+  }, [data?.elements]);
+
+  const elements = useMemo(
+    () => Array.from(elementsById.values()),
+    [elementsById],
+  );
+
   return (
     <View style={styles.container}>
       <MapLibreMap
@@ -75,7 +98,7 @@ export function MapScreen() {
         onRegionDidChange={onRegionDidChange}>
         <Camera ref={cameraRef} initialViewState={{center: [0, 20], zoom: 1}} />
         <UserLocation animated accuracy />
-        {data?.elements.map(el =>
+        {elements.map(el =>
           el.location ? (
             <Marker
               key={el.id}
@@ -88,6 +111,11 @@ export function MapScreen() {
           ) : null,
         )}
       </MapLibreMap>
+      {!position ? (
+        <View pointerEvents="none" style={styles.loadingOverlay}>
+          <ActivityIndicator size="large" color="#1d6fe0" />
+        </View>
+      ) : null}
     </View>
   );
 }
@@ -114,4 +142,14 @@ const styles = StyleSheet.create({
     lineHeight: 22,
     textAlign: 'center',
   },
+  loadingOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(255,255,255,0.6)',
+  },
 });