Update image loading state to use a spinner and a faded static image.

[mtias]

The current implementation of "this image is being uploaded" uses a heavy pulsating effect that has not proven to be very clear but it has been distracting.

This simply removes that effect and shows a spinner at the center — consistent with how Embeds are working — while leaving the image faded out until upload completes.

Related #8810.

[noisysocks]

Nice! I pushed up c76ec28 which applies the same effect to the Gallery block.

[talldan]

This is a good improvement 👍

There's also the media and text block that could do with this improvement (that doesn't seem to have any loading state at all, which I found confusing as a user).

Thinking into the future, I wonder if there's more that can be abstracted out of the media blocks (in terms of placeholders, loading state, toolbar buttons) so that they don't have separate but very similar implementations.

[noisysocks]

There's also the media and text block that could do with this improvement (that doesn't seem to have any loading state at all, which I found confusing as a user).

Ah, interesting. It looks like MediaContainer ignores the blob URL because the mime type isn't set yet. I think let's tackle that separately.

Thinking into the future, I wonder if there's more that can be abstracted out of the media blocks (in terms of placeholders, loading state, toolbar buttons) so that they don't have separate but very similar implementations.

Moving the <img> part out into its own component might be a good way of tackling #11650, too.

[mtias]

Thanks for including galleries and merging!

I wonder if there's more that can be abstracted out of the media blocks (in terms of placeholders, loading state, toolbar buttons) so that they don't have separate but very similar implementations.

I agree. Ideally a block developer only has to use a MediaArea or something and all the consistent UX comes with it.