feat(maintainers): add country borders and fix avatar loading

src/components/MaintainersMap.tsx

@@ -162,7 +162,19 @@ function readProfileNodes(host: Element) {
       },
       count: { width: count.offsetWidth, height: count.offsetHeight },
     }
-    return [{ id, card, line, pin, portraits, count, sizes }]
+    const pendingImages = {
+      portraits: Array.from(
+        portraits.querySelectorAll<HTMLImageElement>(
+          'img[data-globe-src]:not([src])',
+        ),
+      ),
+      count: Array.from(
+        count.querySelectorAll<HTMLImageElement>(
+          'img[data-globe-src]:not([src])',
+        ),
+      ),
+    }
+    return [{ id, card, line, pin, sizes, pendingImages }]
   })
 }
 
@@ -236,7 +248,7 @@ function placeProfiles(
     ...viewport.filters,
   ]
   const labels = nodes.flatMap(
-    ({ id, card, line, pin, portraits, count, sizes }) => {
+    ({ id, card, line, pin, sizes, pendingImages }) => {
       const anchor = anchors.get(id)
       if (!anchor) return []
       const pinVisibility =
@@ -276,20 +288,17 @@ function placeProfiles(
         card.style.transitionDelay = visible ? '0s, 0s, 0s' : '0s, 0s, 280ms'
         card.inert = !visible
         line.style.opacity = visible && !offscreen ? '1' : '0'
-        if (visible) {
-          const row = offscreen ? count : portraits
-          for (const avatar of row.querySelectorAll<HTMLImageElement>(
-            'img[data-globe-src]:not([src])',
-          )) {
-            if (avatar.dataset.globeSrc) avatar.src = avatar.dataset.globeSrc
-          }
-        }
       }
       const previous = positions.get(id)
       if (!visible) {
         if (previous) previous.visible = false
         return []
       }
+      const images = offscreen ? pendingImages.count : pendingImages.portraits
+      for (const avatar of images) {
+        if (avatar.dataset.globeSrc) avatar.src = avatar.dataset.globeSrc
+      }
+      images.length = 0
       const fresh = !previous?.visible || previous.offscreen !== offscreen
       const badgeBottom = mobile
         ? Math.min(bottom, Math.max(badgeTop + height, bounds.height))

src/components/maintainersChartsGlobe.ts

@@ -2,6 +2,7 @@ import { createChartRuntime, createMark, defineChart } from '@tanstack/charts'
 import type { ChartGradient, SceneNode } from '@tanstack/charts'
 import { createSvgChartRenderer } from '@tanstack/charts/svg/renderer'
 import { geoOrthographic, geoPath, scaleIdentity } from 'd3'
+import borders from '~/data/maintainers-country-borders.json'
 import land from '~/data/maintainers-land.json'
 
 type Vector = [number, number, number]
@@ -12,6 +13,10 @@ const worldLand: { type: 'MultiPolygon'; coordinates: number[][][][] } = {
   type: 'MultiPolygon',
   coordinates: land.coordinates,
 }
+const countryBorders: { type: 'MultiLineString'; coordinates: number[][][] } = {
+  type: 'MultiLineString',
+  coordinates: borders.coordinates,
+}
 
 function gradients(dark: boolean): ChartGradient[] {
   const ocean = dark
@@ -81,6 +86,7 @@ export function createChartsGlobe(container: HTMLDivElement) {
           [chart.width, chart.height],
         ])
       const landPath = geoPath(projection)(worldLand)
+      const bordersPath = geoPath(projection)(countryBorders)
 
       const nodes: SceneNode[] = [
         {
@@ -113,6 +119,22 @@ export function createChartsGlobe(container: HTMLDivElement) {
           },
         })
       }
+      if (bordersPath) {
+        nodes.push({
+          kind: 'polyline',
+          key: 'globe-country-borders',
+          points: [],
+          path: bordersPath,
+          style: {
+            fill: 'none',
+            stroke: 'var(--color-background-default)',
+            strokeOpacity: 0.65,
+            strokeWidth: 0.75,
+            lineJoin: 'round',
+            lineCap: 'round',
+          },
+        })
+      }
       // Use the same location vectors as the avatar connectors.
       for (const {
         id,