Open jameskoster opened 2 years ago
youknowriad
commented
2 years ago 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
commented
2 years ago 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
commented
2 years ago I suspect that https://github.com/WordPress/gutenberg/issues/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
commented
2 years ago We also have this problem in other places where we load patterns: Improvements to pattern loading #36491
jameskoster
commented
2 years ago https://github.com/WordPress/gutenberg/pull/38997 brings this to the surface once more.
https://user-images.githubusercontent.com/846565/162455777-85428412-d777-418e-9d37-844d788d0f8f.mp4
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:
https://user-images.githubusercontent.com/846565/154681989-f2710233-47b1-4111-89f5-27402f097ec7.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.