dyomedea/src/components/map/Tile.tsx

import react, { memo, useEffect, useRef } from 'react';
import { isEqual } from 'lodash';

export interface TileProperties {
  /** The image's source URL  */
  href: string;
  /** A delay to add (for test/debug purposes)  */
  delay?: number;
}

/**
 *
 * @param props
 * @returns A tile
 *
 * Tile components are containers for images.
 *
 * They return an empty `<g/>` element immediately so that the rendering can proceed
 * and append an `<image/>` element whenever the image is loaded.
 *
 * They are designed to be part of {@link components/map/TiledLayer!TiledLayer} components in SVG `<g/>` elements
 * in which the unit is the tile size. In this coordinate system their size is thus always equal to 1.
 */
export const Tile: react.FC<TileProperties> = memo((props: TileProperties) => {
  const g = useRef<SVGGElement>(null);

  const timeout = (ms: number) => {
    return new Promise((resolve) => setTimeout(resolve, ms));
  };
  console.log(`Rendering tile: ${props.href}`);
  useEffect(() => {
    const loadImage = async () => {
      console.log(`Pre loading: ${props.href}`);
      const image = new Image(1, 1);
      image.loading = 'eager';
      // @ts-ignore
      image.setAttribute('href', props.href);
      if (!image.complete) {
        await image.decode();
      }
      if (props.delay !== undefined) {
        await timeout(props.delay);
      }
      const svgImage = document.createElementNS(
        'http://www.w3.org/2000/svg',
        'image'
      ) as unknown as SVGImageElement;
      svgImage.setAttribute('width', '1');
      svgImage.setAttribute('height', '1');
      // @ts-ignore
      svgImage.setAttribute('href', props.href);
      g.current?.replaceChildren(svgImage);
    };
    loadImage();
  }, [props.href]);

  return <g ref={g} />;
}, isEqual);

export default Tile;