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

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

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

const Tile: react.FC<TileProperties> = (props: TileProperties) => {
  console.log(`Rendering <Tile/>`);
  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();
  }, []);

  // const children = useMemo(
  //   () => (
  //     <>
  //       <g ref={g} transform={`translate(${props.x},${props.y})`} />
  //     </>
  //   ),
  //   []
  // );

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

export default Tile;