sandbox/svgmap/src/components/map/Tile.tsx

import react, { useEffect, useRef, useState } from 'react';

interface TileProperties {
  href: string;
  x: number;
  y: number;
  delay?: number;
}

const Tile: react.FC<TileProperties> = (props: TileProperties) => {
  const g = useRef<SVGGElement>(null);

  const timeout = (ms: number) => {
    return new Promise((resolve) => setTimeout(resolve, ms));
  };

  useEffect(() => {
    const loadImage = async () => {
      console.log(`Pre loading: ${JSON.stringify(props.href)}`);
      const image = new Image(256, 256);
      //      const image:SVGImageElement = document.createElement('image') as unknown as SVGImageElement;
      //      const image = new SVGImageElement();
      image.loading = 'eager';
      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', '256');
      svgImage.setAttribute('height', '256');
      svgImage.setAttribute('href', props.href);
      // svgImage.setAttribute('x', '0');
      // svgImage.setAttribute('y', '0');
      g.current?.replaceChildren(svgImage);
    };
    loadImage();
  });

  return (
    <>
      <g ref={g} transform={`translate(${props.x},${props.y})`} />
    </>
  );
};

export default Tile;