Map tiles load within 3 seconds on 4G; loading skeleton shown during fetch

Slow map tile loads directly drive bounce rate on directory pages. On a 4G connection — the median mobile connection globally — tiles that take more than 3 seconds before showing any map content leave users staring at a blank container with no progress signal. ISO 25010:2011 performance-efficiency classifies this as a time-behavior defect. For location-based directories, the map is the primary navigation surface; a frozen or blank map during load is functionally equivalent to a broken page.

Add a skeleton component that renders immediately when the map container mounts, then hide it once the map library fires its load event. Do not wait for tiles to fully render before removing the loading indicator — fire onLoad as soon as the map canvas is interactive.

function MapComponent() {
  const [loaded, setLoaded] = useState(false);

  return (
    <div className="map-container">
      {!loaded && <MapSkeleton />}
      <MapLibreGl
        onLoad={() => setLoaded(true)}
        mapStyle="mapbox://styles/mapbox/light-v11"
      />
    </div>
  );
}

For tile speed, choose a tile provider with a CDN edge network and set maxTileCacheSize to at least 200 to reduce repeat fetches on pan/zoom.