Show spinner while snapshot image is loading

[ghengeveld]

• Show a spinner while the snapshot image (latest/baseline, whichever is active) is loading.
• Prevent showing the diff/focus overlay image while the snapshot is loading.
• Show a spinner while the overlay image (diff/focus) is loading, on top of the snapshot image.

Screen.Recording.2024-05-28.at.10.59.09.mov

📦 Published PR as canary version: 1.5.0--canary.309.7b89f8d.0

✨ Test out this PR locally via:

npm install @chromatic-com/storybook@1.5.0--canary.309.7b89f8d.0
# or 
yarn add @chromatic-com/storybook@1.5.0--canary.309.7b89f8d.0

[MichaelArestad]

Nice! I think the spinner is great.

1. Can you keep the spinner in place until all of the images are loaded? I'm not sure the pulsing image conveys it's not ready yet.
2. Can the spinner be vertically centered?

[ghengeveld]

Can you keep the spinner in place until all of the images are loaded? I'm not sure the pulsing image conveys it's not ready yet.

I could, but then we're not showing the user something useful while we could be. It's a micro optimization but I prefer that over showing the spinner for longer. In the Chromatic webapp we currently preload the snapshot image but we don't preload the overlay images, which inspired this behavior.

Can the spinner be vertically centered?

It is, but the snapshot in the demo is < 100px tall and I've given the container a min-height: 100px, so it's actually getting vertically centered relative to that. Without the min-height the spinner could render flush to the top edge or even get clipped, which would be weird.

[MichaelArestad]

I could, but then we're not showing the user something useful while we could be. It's a micro optimization but I prefer that over showing the spinner for longer. In the Chromatic webapp we currently preload the snapshot image but we don't preload the overlay images, which inspired this behavior.

@ghengeveld In that case, I would recommend keep current behavior, but without the pulsing image.

It is, but the snapshot in the demo is < 100px tall and I've given the container a min-height: 100px, so it's actually getting vertically centered relative to that. Without the min-height the spinner could render flush to the top edge or even get clipped, which would be weird.

Perfect!

[ghengeveld]

@MichaelArestad Without the pulsating effect, there is no way to know the overlay image is still loading, which may lead people to incorrectly assume there are no visual changes.

An alternative effect I originally envisioned is a linear indeterminate progress bar either above or below the image. Do you think that would be more appropriate?

I implemented this alternative loading indicator. It is actually simpler because it works both for the snapshot image and the overlay images (in which case the bar appears on top of the snapshot image).

Screen.Recording.2024-05-22.at.14.14.15.mov