Navigation Block: Improve loading state

[shaunandrews]

When loading the block editor with a Navigation block, there is a brief loading state when fetching the menu items. Currently this loading message is left aligned and has a label that is slightly too large. Also, the "Loading..." message is not vertically aligned to the spinner. Here's a screenshot from the new TwentyTwenty theme:

I propose we update the loading message with the following changes:

• Center the message within the block
• Show a dashboard border to help indicate the size of the block
• Add a subtle background color to the block to help indicate the size of the block
• Add a subtle fade-in/fade-out animation to the new background color to further emphasis it's loading state
• Reduce the size of the loading label to 13px
• Add a simple fade-out/fade-in transition from the loading state to the normal state.

Here's a GIF of what it could look like:

(Its worth noting that the background animation doesn't come through very well in the GIF, but I'd expect a very simple pulse-like animation.)

[karmatosed]

I think this is good but my only thought is if we have existing loading states let's use those. I don't think we do or if we do we could also see this as a way to improve them.

Just looping in @jasmussen to check my thinking we have no existing state to call on.

[jasmussen]

Love it, Shaun. I think we can probably start to think about a new spinner design for all of WordPress (😱) — but that could probably a separate thing.

Which brings me to: this is a good design, because it leverages how the existing placeholders look, and this loading state does share DNA with the placeholder state. So, 👍 👍

Depending on how far to take this effort, and given the DNA shared between the Placeholder state and the Loading state, what would the loading state look like, if the placeholder looked as suggested in #18667?

[karmatosed]

Whilst I don't like lot of Facebook stuff, the loading being an actual visual of the thing coming, or 'bars' to me is nicer than a spinner. I wonder if we could use something similar?

[jasmussen]

I've heard that referred to as "skeleton loading". I think it can be nice, I also think it's hard to make generic.

[karmatosed]

Ah yes, that's the term. I agree it's very hard to be generic. I have a personal preference to avoid loaders that go around as don't scale to multiples and also can cause visual issues for some. However, again it's about finding one that will scale across and work in this case.

[karmatosed]

Relating to the drop-zone we have this issue to loop back to: #17605

[getdave]

Does this still happen @shaunandrews? I can't replicate.

[shaunandrews]

@getdave I can't seem to trigger a loading state. I tried simulating a slow connection with Chrome and couldn't get a loading state to display. Perhaps the current block doesn't have one. Its unclear if one is needed — would there be a scenario when the block would need to show a loading state?

[jasmussen]

There's a very brief loading state with the spinner in the top left, when you first insert the navigation block. I'm not seeing it on page reloads. I think there's a separate effort to look at, to improve the spinner design itself, and which can position it well within all blocks that have a loading state. But specifically to the navigation block, I wonder if we can close this one now?