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.

image-gall.mov

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?