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;
};

[bbohlender]

with a probability of 99% this happens because the image is attached but its matrix is not updated for a very short time. In general all matricies should be 0 initiallially, to prevent rendering before beeing positioned correctly. This should be fixed with the new archiecture that mounts to the mesh using the ref callback and set the matrix to 0 there.