Image block: Delayed response when opening image in lightbox for the first time

[artemiomorales]

Description

When opening an image in the lightbox, there is a delay before the UI responds.

Step-by-step reproduction instructions

Must be tested on a live (not local) environment.

1. Ensure the Gutenberg Interactivity API experiments are enabled.
2. Add an image to a post.
3. Enable the lightbox for the images in Advanced > Behaviors under the block settings.
4. Publish the post and click on the image.
5. See that there is a delay before the lightbox animation takes effect.

Screenshots, screen recording, code snippet

lightbox-delay.mp4

Environment info

-Gutenberg 16.0.0, WP 6.2.2

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[luisherranz]

Why is the delay happening? Is it because it waits until the image has been downloaded?

[artemiomorales]

Why is the delay happening? Is it because it waits until the image has been downloaded?

@luisherranz Yes, it's because it waits for the image to be downloaded.

[artemiomorales]

Note: While we are considering overall lightbox animation improvements, we could include this suggestion as part of the same PR.

I also wonder if you all considered a very slight zoom on hover so it’d anticipate the behavior.

[luisherranz]

Is it possible to use the original image first, then switch to the full version once it's downloaded?

[artemiomorales]

@luisherranz Will give that a shot! I'll also look into preloading the image on hover, which could at least help on desktop.

[artemiomorales]

This has been fixed in #51721