react-image-lightbox Loading icon gets stuck in React 18 dev mode

Loading icon gets stuck in React 18 dev mode

Open igordanchenko opened this issue 2 years ago • 13 comments

I ran into this issue in React 18 app using strict mode.

The lightbox never shows the first image, but instead, it keeps showing a loading icon. The images start showing fine only after I click the previous/next buttons.

Screen Shot 2022-03-31 at 7 28 43 PM

Demo: https://codesandbox.io/s/github/igordanchenko/react-photo-album/tree/v1.12.0/examples/lightbox

Steps to reproduce:

Open the above link
Click any image

This issue is related to the following change in React 18:

React 18 introduces a new development-only check to Strict Mode. This new check will automatically unmount and remount every component, whenever a component mounts for the first time, restoring the previous state on the second mount.

https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-strict-mode

While this bug is currently visible only in dev mode, it highlights that similar issues may occur in production in the future.

Mar 31 '22 23:03 igordanchenko

Any update on this issue?

May 08 '22 10:05 syum-akhlaque

same issue

May 20 '22 07:05 jongjunpark

Same issue, if you resize the window the current image appears

Jun 01 '22 02:06 cruzlutor

Having the same issue

Jun 11 '22 13:06 dsdsharma

same issue

Jun 15 '22 13:06 kahirokunn

Found temp hack to solve the problem (tested on chrome only):

{lightBoxImage && (
        <Lightbox
          mainSrc={lightBoxImage}
          onImageLoad={() => {
            window.dispatchEvent(new Event('resize'));
          }}
          onCloseRequest={() => setLightBoxImage(null)}
        />
      )}

Jun 19 '22 13:06 tarasmelnychuk

Same problem here, but at least @ihappycoder 's hacky fix worked

Jul 12 '22 14:07 lvilasboas

If anyone is looking for an alternative to react-image-lightbox, here is the recently released lightbox library - yet-another-react-lightbox. All feedback is welcome.

Jul 12 '22 14:07 igordanchenko

Same issue, if you resize the window the current image appears

same here

Jul 18 '22 07:07 ajitstark

Same issue

Aug 11 '22 13:08 rpin-01

Same, please fix

Aug 15 '22 15:08 FStriewski

https://www.npmjs.com/package/react-18-image-lightbox

Sep 16 '22 23:09 Fidia-e

I have this issue on react-18-image-lightbox and original versions.

With "hacky fix" - issue gone, only have little longer loading time.

Sep 24 '22 11:09 larinius

https://www.npmjs.com/package/react-18-image-lightbox

Is this a separate package for react-18? looks like the readme is not updated properly https://www.npmjs.com/package/react-18-image-lightbox?activeTab=readme