Allow adding loading indicator overlay on editor

[felixarntz]

Is your feature request related to a problem? Please describe.
In some cases, it is necessary to run non-trivial logic on pageload in the block editor, which may take let's say 1-2 seconds. For example, I have been working on a plugin which allows to share content directly into Gutenberg via the Web Share Target API, and in order for that to work, Gutenberg has to wait for an incoming share postMessage event and then run the necessary logic: for example, in my case, if an image is being shared, that image should be uploaded to the media library and then a core/image block should automatically be inserted.

For such cases it would be beneficial to have a general loading indicator to block the user from any interaction until that the "initial" intended editor state is available. Right now, the experience in my plugin is somewhat unexpected, since the user has no idea something will happen, and then after a few seconds suddenly blocks are being inserted.

Describe the solution you'd like
It would be great if Gutenberg offered an easy-to-use loading indicator overlay that would go over the entire editor UI once active. For example, there could be something like dispatch( 'core/block-editor' ).setLoading( active ) to toggle on and off.

Describe alternatives you've considered
This could also be something that I build into my plugin specifically. But I think it's worthy of considering for a built-in component, for a more consistent and integrated experience.

[youknowriad]

I can see how this can be useful. It would be good to try to gather some similar/related use-cases. It would make it easier to reason about it and figure out the best API.

[mapk]

I was fiddling with a custom loading graphic for Gutenberg and came up with this.

[MichaelArestad]

Do we have any progress indicators already in Gutenberg? I don't see any in Storybook. Perhaps we need one or more built as a component that can be used in a variety of situations. I can see this being useful in many situations.

I do see one in the Link UI when searching for a post or page. It's a grey circle with a white dot that spins:

@mapk What led you to that location and design? I think we could definitely go in that direction for a larger progress indicator where space is available.

[youknowriad]

The design of that spinner is based on spinners on Core. We just kept the one being used there. It's definitely not the greatest design.

[mapk]

@mapk What led you to that location and design? I think we could definitely go in that direction for a larger progress indicator where space is available.

@MichaelArestad, my first instinct was to get away from that circle loading indicator because it wasn't visually appealing to me. This particular scenario provided a much larger area to display a loading indicator, so I wanted to redesign it with a little more charm.

The design is based loosely on the blocks graphic used here: #18667 and mimics a block with toolbar, etc.

I wanted to animate it to show "progress" and since the whole page was in a loading state, it felt right to center the gif and dim out the rest of the page.