Gutenberg: Loading state of blocks with entities

[mtias]

This is how the site title renders while it's loading:

It should indicate this brief loading state somehow. We have to be careful, though, with plaguing the UI with "loading..." or spinners, specially when it is just a brief flash.

[karmatosed]

I took a very short amount of time to just get out a few explorations around this.

Skeleton of a block

This loading state is very similar to the shadow of the elements coming in. Perhaps a simple shading or even a pulse.

Pulsing blocks

Over a loading, what about a simple block pulse?

This has complications if just flashing and doesn't really help the multiples on same UI though.

Conclusion

I do feel taking the approach of skeleton content could avoid some of the spinning loader issues.

[carolinan]

I have not experienced any delays with the site title.

I prefer the simple shade, but this also looks like the spacer block.

[noahtallen]

I imagine something like this should also be added to the template part/post content blocks?

[dubielzyk]

Had a look into a few loading state visual alternatives to what's already provided by @karmatosed. Most of these would be animating so they might not make sense by just looking at them.

I think the simple gray pulsing block that was originally done above is probably the best move forward.

We'll need to tweak the colors and animation later (the above example plays a bit weirdly since it's a exported GIF).

@noahtallen in terms of Template Parts loading I think it make sense to err on the side of loading the bigger component until the children has all loaded instead of showing multiple nested loading states. Could you give me a sense of how long some of these blocks/template parts are likely to load for? We might end up in a state where it makes sense to show loading states for only the blocks with entities and no loading state for anything else.

[noahtallen]

For some context of the loading hierarchy:

1. The first step is to load the template's blocks
2. Once the template blocks are parsed, the individual blocks there (e.g. template part, post content) will load their entities.
3. The template part / post content blocks load.
4. Once the blocks are parsed for those items, they will start loading their dynamic values.
5. At that point, things like the site title or nav menu will be loaded.
6. Loading complete after the entire block hierarchy has been parsed, and any child blocks have finished loading their dynamic values.

As for time, I'm not sure. I think it partially depends on internet connection, but currently I am seeing maybe a second or two for the root template, and then maybe another second or two for the rest of it. This is all local too, so a real site could be slower.

Another challenge is that we don't know the dimensions of the block until after it renders, which could provide a janky experience 🤔

[dubielzyk]

For some context of the loading hierarchy:

That's super helpful

Another challenge is that we don't know the dimensions of the block until after it renders

Yeah, very true. Any idea on how we can fix that? Could we not show anything until the block is rendered, then when they load dynamic values we can show the loading part. Definitely wanna avoid too much jumping of elements

[noahtallen]

Could we not show anything until the block is rendered, then when they load dynamic values we can show the loading part

I don't think that helps since the dynamic values define the height :/ For example, the dynamic value "site title" might be very short (and take up one line) or very long (and take up multiple lines)

[dubielzyk]

I think that's fine though. Most placeholder loaders you see out there have a defined with but not a defined height. I suspect we could work with something similar.

[karmatosed]

Most placeholder loaders you see out there have a defined with but not a defined height. I suspect we could work with something similar.

I think this is also fine and would recommend we go with a simple solution and take from there. We can always iterate.

[dubielzyk]

Which solution do you recon we should go with @karmatosed ?

[karmatosed]

I agree with you on the 'simple gray pulsing block' @dubielzyk.

[mtias]

Would it make more sense to do something with the toolbar + block icon if we don't know the height?

[jameskoster]

Would it make more sense to do something with the toolbar + block icon if we don't know the height?

This in combination with the placement indicator line, similar to the work Shaun has been exploring in https://github.com/WordPress/gutenberg/issues/26404 could work.

[karmatosed]

@jameskoster I like that and think it works without the placement indicator even.

[jameskoster]

Agreed, the indicator could be situational. I think it might be nice for it to persist in this loading state, if it was present before the block was added – whether that is via drag / drop, or the design I referenced in the previous comment.

[karmatosed]

I feel like there's a direction here, so going to cautiously move the labels to 'needs dev', can always shuffle them back.