Chaotic pattern previews

[jameskoster]

When patterns contain blocks that need to load external data (e.g. Navigation block, Site Logo block) the preview thumbnail appears sequentially which can feel quite chaotic due to the overall height changing multiple times through the loading state.

It's most egregious when browsing multiple patterns that contain multiple instances of these blocks at the same time, for example when selecting a header.

The issue is best explained with a video:

jumpy.mp4

I assume it's unrealistic to expect the pattern to know its overall dimensions before the contents are fully loaded. So we may need to consider a holistic loading state for pattern thumbnail grids.

[youknowriad]

I think our best shot here is the use of React "suspense". I've already started a PR that explores these ideas which would allow us to have better control over loading states #37261 It's a bit challenging but I'll get back to it and see how far we can get.

[anelllya]

I think one good way of solving this is creating a ghost loading with a template of at least nine elements. Like in this example: https://www.npmjs.com/package/react-loading-skeleton. What do you think?

[jasmussen]

I suspect that #38980 will help with the navigation block in most of the cases, at least, and I'll take a look at that when I get a moment.

[javierarce]

We also have this problem in other places where we load patterns: Improvements to pattern loading #36491

[jameskoster]

#38997 brings this to the surface once more.

default.mp4