Flicker when changing textures at runtime

[9inpachi]

Hi,

When I try to change texture of a material at runtime with a preloaded texture, I see a flicker.

1. If I update the texture manually of a material without using the map prop, the material turns to white for a split second for some images.

const PanoramaComponent = ({ src, accessToken }) => {
  const materialRef = useRef(null);

  const { image, isLoading, error } = useFetchS3Image(src, accessToken);

  useEffect(() => {
    if (!image) {
      return;
    }

    texture.image = image;
    texture.needsUpdate = true;

    if (materialRef.current) {
      materialRef.current.map = texture;
      materialRef.current.needsUpdate = true;
    }
  }, [image, texture]);

  if (isLoading) {
    return <Loader />
  }

  return (
    <mesh scale={[-1, 1, 1]}>
      <sphereGeometry args={[20, 60, 20]} />
      <meshBasicMaterial ref={materialRef} visible={!error} side={BackSide} />
    </mesh>
  );
}

2. If I use the map prop of the material, then the old texture shows for a split second before the new texture replaces it for some images.

const PanoramaComponent = ({ src, accessToken }) => {
  const materialRef = useRef(null);

  const { image, isLoading, error } = useFetchS3Image(src, accessToken);
  const texture = useMemo(() => {
    const tex = new Texture();
    tex.colorSpace = SRGBColorSpace;
    tex.image = image;
    tex.needsUpdate = true;

    return tex;
  }, [image]);

  if (isLoading) {
    return <Loader />
  }

  return (
    <mesh scale={[-1, 1, 1]}>
      <sphereGeometry args={[20, 60, 20]} />
      <meshBasicMaterial
        ref={materialRef}
        visible={!error}
        side={BackSide}
        map={texture}
        onUpdate={(material) => void (material.needsUpdate = true)}
      />
    </mesh>
  );
}

[krispya]

Hi! Can you make a sandbox that demonstrates the timing issue?