Perceived performance improvement with Mapbox Static Images API

.github/workflows/coverage.yml

@@ -15,6 +15,7 @@ jobs:
       test_script: npm run test
     secrets:
       caller_github_token: ${{ secrets.GITHUB_TOKEN }}
+      MAPBOX_API_KEY: ${{ secrets.MAPBOX_API_KEY }}
   individual_coverage_percentages:
     if: ${{ github.event_name == 'pull_request' }}
     runs-on: ubuntu-latest

.github/workflows/run-tests.yml

@@ -13,11 +13,15 @@ jobs:
         npm i -D react@18 react-dom@18
         npm run build
       node_matrix: '["14.x", "16.x", "18.x"]'
+    secrets:
+      MAPBOX_API_KEY: ${{ secrets.MAPBOX_API_KEY }}
 
   call_run_tests-react-17:
     uses: yext/slapshot-reusable-workflows/.github/workflows/run_tests.yml@v1
     with:
       node_matrix: '["14.x", "16.x", "18.x"]'
+    secrets:
+      MAPBOX_API_KEY: ${{ secrets.MAPBOX_API_KEY }}
 
   call_run_tests-react-16:
     uses: yext/slapshot-reusable-workflows/.github/workflows/run_tests.yml@v1
@@ -26,3 +30,5 @@ jobs:
         npm i -D react@16.14 react-dom@16.14
         npm run build
       node_matrix: '["14.x", "16.x", "18.x"]'
+    secrets:
+      MAPBOX_API_KEY: ${{ secrets.MAPBOX_API_KEY }}

.github/workflows/wcag_test.yml

@@ -2,12 +2,13 @@ name: WCAG tests
 
 on:
   pull_request:
-    branches: [main, develop]
+    branches: [main, develop, feature/*]
 
 jobs:
   call_wcag_test:
     uses: yext/slapshot-reusable-workflows/.github/workflows/wcag_test.yml@v1
     secrets:
       NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+      MAPBOX_API_KEY: ${{ secrets.MAPBOX_API_KEY }}
     with:
       build_script: ./tests/scripts/start-storybook.sh

.storybook/test-runner.ts

@@ -1,28 +1,36 @@
 import { injectAxe, checkA11y } from 'axe-playwright';
 import { Page } from 'playwright-core';
 import { runOnly } from './wcagConfig';
+import { TestContext, TestRunnerConfig } from '@storybook/test-runner';
 
 /**
  * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api-experimental
  * to learn more about the test-runner hooks API.
  */
-const renderFunctions = {
+const renderFunctions: TestRunnerConfig = {
   async preRender(page: Page) {
     await injectAxe(page);
   },
-  async postRender(page: Page, context) {
-    await checkA11y(page, '#root', {
-      axeOptions: {
-        runOnly,
-        rules: {
-          'color-contrast': { enabled: context.name !== 'Loading' }
-        },
-      },
-      detailedReport: true,
-      detailedReportOptions: {
-        html: true,
+  async postRender(page: Page, context: TestContext) {
+    await checkA11y(
+      page,
+      {
+        include: ['#root'],
+        exclude: ['#root .mapboxgl-canvas-container'],
       },
-    });
+      {
+        axeOptions: {
+          runOnly,
+          rules: {
+            'color-contrast': { enabled: context.name !== 'Loading' },
+          },
+        },
+        detailedReport: true,
+        detailedReportOptions: {
+          html: true,
+        },
+      }
+    );
   },
 };
 

src/components/MapboxMap.tsx

@@ -1,8 +1,9 @@
-import { useRef, useEffect } from 'react';
+import { useRef, useEffect, useMemo } from 'react';
 import mapboxgl, { Map, Marker, MapboxOptions, LngLatBounds, MarkerOptions, LngLat } from 'mapbox-gl';
 import { Result, useSearchState } from '@yext/search-headless-react';
 import { useDebouncedFunction } from '../hooks/useDebouncedFunction';
 import ReactDOM from 'react-dom';
+import { MapboxStaticImage } from './MapboxStaticImage';
 
 /**
  * A functional component that can be used to render a custom marker on the map.
@@ -103,25 +104,33 @@ export function MapboxMap<T>({
   const locationResults = useSearchState(state => state.vertical.results) as Result<T>[];
   const onDragDebounced = useDebouncedFunction(onDrag, 100);
 
+  const options: Omit<MapboxOptions, 'container'> = useMemo(() => {
+    return {
+      style: 'mapbox://styles/mapbox/streets-v11?optimize=true',
+      center: [-74.005371, 40.741611],
+      zoom: 9,
+      ...mapboxOptions
+    };
+  }, [mapboxOptions]);
+
   useEffect(() => {
     if (mapContainer.current && !map.current) {
-      const options: MapboxOptions = {
+      const mapbox = new Map({
         container: mapContainer.current,
-        style: 'mapbox://styles/mapbox/streets-v11',
-        center: [-74.005371, 40.741611],
-        zoom: 9,
-        ...mapboxOptions
-      };
-      map.current = new Map(options);
-      const mapbox = map.current;
+        ...options
+      });
+      map.current = mapbox;
       mapbox.resize();
       if (onDragDebounced) {
         mapbox.on('drag', () => {
           onDragDebounced(mapbox.getCenter(), mapbox.getBounds());
         });
       }
+      mapbox.on('load', () => {
+        mapbox.getContainer().style.visibility = 'visible';
+      });
     }
-  }, [mapboxOptions, onDragDebounced]);
+  }, [options, onDragDebounced]);
 
   useEffect(() => {
     markers.current.forEach(marker => marker.remove());
@@ -161,7 +170,13 @@ export function MapboxMap<T>({
   }, [PinComponent, getCoordinate, locationResults]);
 
   return (
-    <div ref={mapContainer} className='h-full w-full' />
+    <div className='grid h-full w-full'>
+      <div ref={mapContainer} className="col-span-full row-span-full invisible"/>
+      <MapboxStaticImage
+        mapboxAccessToken={mapboxAccessToken}
+        mapboxOptions={options}
+      />
+    </div>
   );
 }
 

src/components/MapboxStaticImage.tsx

@@ -0,0 +1,81 @@
+import { CSSProperties, useMemo, useRef, useState } from 'react';
+import { MapboxOptions, LngLatLike } from 'mapbox-gl';
+import useLayoutEffect from 'use-isomorphic-layout-effect';
+
+/**
+ * Props for {@link MapboxStaticImage}.
+ */
+export interface MapboxStaticImageProps {
+  /** Mapbox access token. */
+  mapboxAccessToken: string,
+  /** Map customization for Mapbox static image. */
+  mapboxOptions: Pick<MapboxOptions, 'center' | 'zoom' | 'style'>
+}
+
+/**
+ * Renders a static map image using Mapbox Static Image API.
+ *
+ * @internal
+ */
+export function MapboxStaticImage({
+  mapboxAccessToken,
+  mapboxOptions
+}: MapboxStaticImageProps): JSX.Element | null {
+  const mapContainer = useRef<HTMLDivElement>(null);
+  const [divDimension, setDivDimension] = useState<{ width: number, height: number }>();
+  useLayoutEffect(() => {
+    if (mapContainer.current) {
+      setDivDimension({
+        width: mapContainer.current.clientWidth,
+        height: mapContainer.current.clientHeight
+      });
+    }
+  }, []);
+
+  const staticMapboxStyle: CSSProperties | undefined = useMemo(() => {
+    const { style, center, zoom } = mapboxOptions;
+    if (!divDimension || !center || !zoom || typeof style !== 'string') {
+      return undefined;
+    }
+    const { width, height } = divDimension;
+    const url = getMapboxStaticImageUrl({ mapboxAccessToken, style, center, zoom, width, height });
+    if (!url) {
+      return undefined;
+    }
+    return {
+      backgroundImage: `url(${url})`
+    };
+  }, [divDimension, mapboxAccessToken, mapboxOptions]);
+
+  return <div ref={mapContainer} className='col-span-full row-span-full' style={staticMapboxStyle}/>;
+}
+
+/**
+ * The configuration for Mapbox Static Image API url.
+ */
+interface MapboxStaticImageUrlConfig {
+  /** Mapbox access token. */
+  mapboxAccessToken: string,
+  /** Mapbox stylesheet url to apply to the static map. */
+  style: string,
+  /** Center point of the static map. */
+  center: LngLatLike,
+  /** Zoom level of the static map. */
+  zoom: number,
+  /** Width (in pixels) of the image. */
+  width: number,
+  /** Height (in pixels) of the image. */
+  height: number
+}
+
+function getMapboxStaticImageUrl(urlConfig: MapboxStaticImageUrlConfig): string | undefined {
+  const { mapboxAccessToken, style, center, zoom, width, height } = urlConfig;
+  // Mapbox Static Image API only support width and height between 1-1280 pixels.
+  if (width > 1280 || height > 1280) {
+    return undefined;
+  }
+  const stylesheet = style.split('mapbox://styles/')[1].split('?')[0];
+  const centerAndZoom = `${center[0]},${center[1]},${zoom}`;
+  const dimension = `${width}x${height}`;
+  return `https://api.mapbox.com/styles/v1/${stylesheet}/static/${centerAndZoom}/${dimension}?access_token=${mapboxAccessToken}`;
+}