Add loading state to ImageGallery

[benfurber]

Due to lazy loading (which we want to keep), there's a noticeable lag when selected a different image to show on the ImageGallery. Sometimes that gets picked up by our feature tests.

https://github.com/ONEARMY/community-platform/assets/16688508/8109aa61-7e58-46e4-9e43-4dc38e1e07aa

Please add some kind of loading state to the component - it's in the component library. This can then mean the step 'Step image is updated on thumbnail click' in src/integration/howto/read.spec.ts can be un-commented out.

[Rednol]

Hi, I haven't checked the code but what I've used in the past is the (somewhat) new loading=lazy attribute. This should load the images after the main content is loaded and should remove any delay.

See https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading#loading_attribute for more info

[davehakkens]

FYI this is also quite bad for the user expereince in user-profiles. Since nothing is visible loading when you click the next header image it looks like the slideshow is broken

[CubeLuke]

Looked into underlying issue and adding the lazy load itself is good for initial page load, which includes the smaller thumbnails and the larger resolution active image. That won't address larger issue of needing to tell browser to pre-load all of the larger resolution images for the non-active images, that way when swapping to them there won't be such a long delay. Alternative could be some sort of spinner/indicator when swapping images while the larger resolution image is loading.

[benfurber]

Thanks for looking into this @CubeLuke! I think a spinner is fine. Can I assign you the issue?

[pizzaisdavid]

Me and Tony looked into this during a Wednesday Mob programming session.

We learned some things:

We think there are no resized images (aka thumbnails) stored in Firebase. The small images that show up at the bottom are the full sized images but scaled down on the browser side.

We think this because we uploaded five very big images to an example Research Article (https://precious-plastics-v4-dev.firebaseapp.com/research/this-is-a-test)

Demo:

And if you open it, you can see them slowly load (small images would not do this.)

So the fact that the image is "lazy loaded" probably isn't related to the problem.

Once the images come onto screen, even the small ones, the full image is loaded. Once we click on a thumbnail, the full image is requested again (confirmed via network console.) Clicking on a previously big image doesn't seem to need to load, maybe due to browser caching.

The problem really is: (we think) clicking on a thumbnail causes it to request the the full image again, even though we already have the full image as the thumbnail.

In the image above, in the inspector, I have hovered a thumbnail, you can see it is actually big. The URL has some parameters at the end, maybe those prevent caching. I am not sure how those parameters get there.

Alternative solution could be: prevent re-requests for the data we already have by storing the image data for each image in a variable, and then on click replacing the image data.

[pizzaisdavid]

The related code: https://github.com/ONEARMY/community-platform/blob/master/packages/components/src/ImageGallery/ImageGallery.tsx

[pizzaisdavid]

Actually, regarding my first comment.

The thumbnails are served via a CDN. And the CDN does seem to offer thumbnails (smaller versions of the images.)

But it is true, that the example I posted above, the with the big images, the thumbnails are the original images.

For an image, the URL for the thumbnail and the URL for the full image are actually different (assuming a CDN is configured.) This is controlled by https://github.com/ONEARMY/community-platform/blob/0deaf9260fbdca79fda88432224e62d1dfc320fb/src/utils/cdnImageUrl.ts

The thumbnails are served via a CDN but the active image is not. Their URLs are different. So the approach I proposed earlier would not work.

So in the end, it is probably best to do what was originally suggested, adding a loading indicator.

[pizzaisdavid]

here is some WIP code Tony and I played around with: https://github.com/ONEARMY/community-platform/compare/master...pizzaisdavid:community-platform:wip-image-loading-state?expand=1

Who ever continues, feel free to use it.