Media Editor Modal: Add a loading and simple error state

[andrewserong]

What?

Add a simple loading state + fade in and error state to the Media Editor Modal.

Why?

While most of the time the full image will be cached in the browser, I noticed this isn't always the case. And on slower or flaky connections (my internet is flaky today, which I think is why I noticed it!) the loading of the image can look clunky as it loads in from top to bottom with the drag handles already present.

So, this PR proposes adding a spinner, a simple fade-in when the image is loaded, and a simple error state when it fails.

These can all be expanded further in follow-ups (I know @ramonjd was previously looking at a more detailed approach to error handling), but the idea here is to try to make things feel a little smoother in a smaller iterative step.

How?

• Add a state to capture loading state
• Use an Image object as a probe to determine loading from within the media editor canvas (it's done here so that we don't pollute the image-editor directory with WP components, etc)
• Once loaded, hide the spinner and fade in
• In the error state, display a simple paragraph (again, could be expanded further in follow-ups)

Testing Instructions

To reproduce, I used Chrome Dev Tools with "Disable cache" switched on to simulate when an image hasn't already loaded. I did encounter this in real world usage, but it was intermittent, so this makes it easier to test consistently.

Switch to "Slow 4G" to test slow loading images.

• Add an image to a post or page
• Click the Crop tool in the image block toolbar to open the cropper
• You should (hopefully) see the image load and fade in smoothly with no weird jumps
• If you switch to Offline before opening the modal, you should get an error message instead

Screenshots or screencast

Before (simulating a very slow connection)

2026-06-11.12.54.06.mp4

After (when quickly loading)

Even when quickly loading, hopefully it should feel smoother with this PR:

2026-06-11.12.58.31.mp4

Error state

Use of AI Tools

Claude Code

[github-actions]

Size Change: +385 B (0%)

Total Size: 8.46 MB

📦 View Changed

Filename	Size	Change
build/scripts/editor/index.min.js	467 kB	+115 B (+0.02%)
build/styles/editor/style-rtl.css	30.5 kB	+62 B (+0.2%)
build/styles/editor/style-rtl.min.css	26 kB	+73 B (+0.28%)
build/styles/editor/style.css	30.6 kB	+64 B (+0.21%)
build/styles/editor/style.min.css	25.9 kB	+71 B (+0.27%)

_{compressed-size-action}

[ramonjd]

Nice quality of life change. Tests well for me.

Something I noticed while testing is that, if you upload a new image with an image already loaded, and click Crop very quickly, the old image loads in the image editor.

I guess the attachment hasn't yet cleared from the image block.

Nothing to do with this PR, just recording it while it's in my mind.

Cheers!

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: andrewserong <[email protected]>
Co-authored-by: ramonjd <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

Flaky tests detected in 9a70d11.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/27323793190
📝 Reported issues:

• [Flaky Test] Should save the changes #78689 in /test/e2e/specs/editor/plugins/wp-editor-meta-box.spec.js
• [Flaky Test] shows post-locked modal when document size limit is exceeded #78753 in /test/e2e/specs/editor/collaboration/http-only/collaboration-document-size-lock.spec.ts

[ramonjd]

Something I noticed while testing is that, if you upload a new image with an image already loaded, and click Crop very quickly, the old image loads in the image editor.

Getting a quick PR up.

#79103

Site logo already handles this.

[andrewserong]

Thanks for the quick review and feedback @ramonjd! Just pushed an update that:

• Only focuses on mount after the loading is complete
• Adds pointer-events: none but sets it back to auto after loading is complete
• Adds the alert role

Happy to keep tweaking if anything still feels off!