Strange flashing when remounting images

[Ledzz]

See repro here: https://stackblitz.com/edit/vitejs-vite-eafhmw?file=src%2Fmain.tsx

And the recording: https://github.com/pmndrs/uikit/assets/9379701/81269900-f3d8-433c-92d5-a8828a915bf6

To reproduce, you should load you system (I've opened a bunch of tabs and enabled 6x CPU throttling). Then click on the red square on the top left.

The page flashes I guess when mounting images (if I remove Icon component, there's no flash). I guess the plane is spawn at zero coordinates and then it moves.

I can try to fix it if you know what the problem is:)

[Ledzz]

I've managed to hack it by loading texture outside of the image and hiding the image until texture is loaded:

export const HackedImage: FC = ({ image, ...props }) => {
  const [texture, setTexture] = useState<Texture | null>(null);
  const [imageRef, setImageRef] =
    useState<ComponentInternals<ImageProperties> | null>(null);
  const { visibility } = useDefaultProperties() ?? {};

  useEffect(() => {
    getTexture(image).then(setTexture);
    // TODO: dispose texture
  }, [image]);

  return texture ? (
    <Image
      src={texture}
      {...props}
      visibility={!texture || visibility === "hidden" ? "hidden" : "visible"}
      ref={setImageRef}
    />
  ) : null;
};