40 lines
897 B
TypeScript
40 lines
897 B
TypeScript
import react, { useEffect, useState } from 'react';
|
|
|
|
interface TileProperties {
|
|
href: string;
|
|
delay?: number;
|
|
}
|
|
|
|
const Tile: react.FC<TileProperties> = (props: TileProperties) => {
|
|
const [ready, setReady] = useState(false);
|
|
|
|
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);
|
|
image.loading = 'eager';
|
|
image.src = props.href;
|
|
if (!image.complete) {
|
|
await image.decode();
|
|
}
|
|
if (props.delay !== undefined) {
|
|
await timeout(props.delay);
|
|
}
|
|
setReady(true);
|
|
};
|
|
loadImage();
|
|
});
|
|
|
|
return ready ? (
|
|
<image width={256} height={256} href={props.href} x={0} y={0} />
|
|
) : (
|
|
<></>
|
|
);
|
|
};
|
|
|
|
export default Tile;
|