renderItem flicker on navigate

[zuidell]

Two questions. First, is there a better way to achieve the functionality of keeping the URL up to date with the current slide? Second, if not, am I doing something which is causing the flickering with my custom renderItem on navigate?

I have an app I'm upgrading from older tech (react 17.0.1, react-router-dom 5.2.0, react-image-gallery 1.0.8) to newer tech (react 18.2.0, react-router-dom 6.6.1, react-image-gallery 1.2.11).

My special use case which is causing issues. onSlide I call a method which calls navigate from useNavigate from react-router-dom. This updates the browser URL to match the current image gallery item. As an example, if images in items are img1.jpg, img2.jpg, img3.jpg the URL updates to https.../album/img2.jpg when img2.jpg is selected in the gallery. This allows users to share a deep link to a specific image.

In some albums it's all images and as such I just use the default render for all items. This works as expected. This implies to me the issue is with the custom renderItem method I supply.

In other albums there are mixes of images and videos with videos having a renderItem method specified. That method is similar to the example code for videos (albeit a bit different to fit requirements). As soon as a single item is a video, meaning there's one custom renderItem in the items array the problem happens. The gallery transitions to the new slide, onSlide fires, navigate executes and updates the URL, then there's a flicker and the previous slide image is briefly displayed.

I've simplified the code down to reduce where the issue could be happening. The renderVideo method now just returns an img tag and the issue persists.

const media = mediaItems.map((mi, index) => {
const galleryItem: ReactImageGalleryItem = {
original: path.join(mediaBase, mi.sizes.preview),
thumbnail: path.join(mediaBase, mi.sizes.thumbnail),
renderItem: mi.isVideo ? () => renderVideo(mi, index) : undefined,
};

function renderVideo(item: MediaItem, index: number) {
return ( //render img for now to simplify things
<img
className="image-gallery-image"
src={path.join(mediaBase, item.sizes.preview)}
alt="Play"
/>
);
}

function onSlide(index: number) {
navigate(mediaItems[index].link);
}

return (
<div>
<ReactImageGallery
items={media}
startIndex={selectedIndex || 0}
onSlide={onSlide}
/>
</div>
);

Thanks in advance for any suggestions!