initial load breaking layout, only controls rendered, then after delay items show up causing layout shifts

[Dujota]

Describe the bug
There is a transitionary period where the images & thumbnails dont get loaded yet but rest of the components in the image gallery do, ex: buttons, full screen etc.
I have tried to set eager loading as well.

So the initial load its a squashed layout as if there are no images and then after a second or so it finally shows images. This happens also when it goes into full screen. I am assuming this could be due to the delay in grabbing the images from the cms cdn, but again most images would be hosted somewhere and not in the app file system to begin with.

This is creating large layout shifts and looks very unapeasing, ideally there should be some form of a loading state or the ability to hook into a loading state, something that we can use to transition into the image gallery and have a placeholder element or loader that fits layout so it doesnt cause big shifts.

Image Gallery Version
1.3.0

To Reproduce
Steps to reproduce the behavior:
add some images to the gallery
then load the page cold/incognito or open different tabs and open page

also after gallery loaded, click to go full screen, it will behave the same way

Expected behavior\

Client info (please complete the following information):
any browser

Additional context
here is my setup, I would say it is very complicated

import 'react-image-gallery/styles/css/image-gallery.css';

import { urlForImage } from 'lib/sanity.image';
import { Listing } from 'lib/sanity.queries/listings';
import { useMemo, useRef, useState } from 'react';
import ImageGallery from 'react-image-gallery';

type ListingSliderProps = {
  listing: Listing;
};

export default function ListingSlider({ listing }: ListingSliderProps) {
  const imageGalleryRef = useRef(null);
  const [isFullScreen, setIsFullScreen] = useState(false);

  const images = useMemo(
    () =>
      listing.gallery.images.map((image, idx) => ({
        fullscreen: urlForImage(image).height(1000).width(2000).url(),
        original: urlForImage(image).height(400).width(800).url(),
        thumbnail: urlForImage(image).height(100).width(200).url(),
        originalAlt: `${listing.title} image ${idx + 1} of ${listing.gallery.images.length}`,
        thumbnailAlt: `Thumbnail #${idx + 1} for ${listing.title}`,
        thumbnailTitle: `Thumbnail #${idx + 1} for ${listing.title}`,
        loading: idx === 0 ? 'eager' : 'lazy',
      })),
    [listing.gallery.images, listing.title]
  );

  const handleImageClick = () => {
    imageGalleryRef?.current?.toggleFullScreen();
  };

  const handleScreenChange = (bool) => {
    setIsFullScreen(bool);
  };

  return (
    <section id='listing-slider' className='flex flex-row items-start justify-center gap-[1rem] self-stretch'>
      <ImageGallery
        items={images}
        showIndex
        onClick={handleImageClick}
        ref={imageGalleryRef}
        thumbnailPosition={isFullScreen ? 'bottom' : 'right'}
        onScreenChange={handleScreenChange}
      />
    </section>
  );
}

[jiveshkalra]

found any fix ?
I am facing the same problem