⚡ Bolt: Optimize Leaflet marker updates

- Avoided recreating all map markers when focusedProfileId changes
- Optimized using an O(1) `.setIcon()` imperative update instead of an O(N) re-render
- Added learning to `.jules/bolt.md`

Co-authored-by: KxlSys <116387953+KxlSys@users.noreply.github.com>

Author: google-labs-jules[bot]

.jules/bolt.md

@@ -0,0 +1,3 @@
+## 2024-05-28 - Optimize Leaflet Marker Updates
+**Learning:** React Leaflet implementations often recreate all markers when a single property like `focusedProfileId` changes if dependencies are broad.
+**Action:** When working with Leaflet markers in React, avoid putting the focused ID in the main layer creation dependency array. Instead, use a secondary `useEffect` to find the specific Leaflet marker instance and update its icon or state directly. This turns an O(N) DOM operation (recreating hundreds of markers) into an O(1) operation (updating just 1-2 markers), vastly improving interaction performance on maps with many points.

src/components/map/congo-map.tsx

@@ -196,6 +196,7 @@ export const CongoMap = React.memo(function CongoMap({ profiles, onProfileClick,
       const marker = L.marker([profile.latitude, profile.longitude], {
         icon: createMarkerIcon(profile.open_to_collaboration, profile.id === focusedProfileId),
       });
+      (marker as any)._isCollaborating = profile.open_to_collaboration;
 
       const safeName = escapeHtml(profile.full_name);
       const safeCity = escapeHtml(profile.city);
@@ -237,11 +238,34 @@ export const CongoMap = React.memo(function CongoMap({ profiles, onProfileClick,
       markersRef.current!.addLayer(marker);
       markersMapRef.current.set(profile.id, marker);
     });
-  }, [profiles, onProfileClick, focusedProfileId]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [profiles, onProfileClick]); // Omit focusedProfileId to prevent recreating all markers on focus
+
+  const prevFocusedIdRef = useRef<string | undefined>(undefined);
 
   useEffect(() => {
     const map = mapRef.current;
     const cluster = markersRef.current;
+
+    // ⚡ Bolt: Efficiently update only the changed marker icons instead of recreating all markers
+    if (prevFocusedIdRef.current && prevFocusedIdRef.current !== focusedProfileId) {
+      const prevMarker = markersMapRef.current.get(prevFocusedIdRef.current);
+      if (prevMarker) {
+        const isCollab = (prevMarker as any)._isCollaborating;
+        prevMarker.setIcon(createMarkerIcon(!!isCollab, false));
+      }
+    }
+
+    if (focusedProfileId) {
+      const newMarker = markersMapRef.current.get(focusedProfileId);
+      if (newMarker) {
+        const isCollab = (newMarker as any)._isCollaborating;
+        newMarker.setIcon(createMarkerIcon(!!isCollab, true));
+      }
+    }
+
+    prevFocusedIdRef.current = focusedProfileId;
+
     if (!focusedProfileId || !map || !cluster) return;
 
     const marker = markersMapRef.current.get(focusedProfileId);