Slow rendering of image in react

I have this kind of UI

So when you click on some of the vertical small tiles it changes the src of the big image. And when that happen my image is so slowly rendered. Yes, I use big image here but for the testing purposes. I think I should handle this case too and show the image when it is completely ready to be displayed.

This is some code examples:

Vertical component

<div>
    {images.map((img, index) => ( //images are coming from props
      <Button onClick={() => handleImageChange(index)}>
         <Img src={img}/>
       </Button>
    ))}
</div>

Horizontal component

<div>
   {images.length ? ( //images coming from props
      <Img src={images[activeImageIndex]}/>
   ) : (
      <Skeleton variant="rect" animation="wave"/>
   )}
</div>

And the on click event of those tiles just changes the index from 0 to 1 for example and takes images[index] to display it.

const activeImageIndex = useSelector((state) => state.gdp.activeImageIndex);
const handleImageChange = (index) => {
  dispatch(setActiveImageIndex(index));
};

So the question is how can I display the image when it is ready completely?

PS: I am using react-image for Img component