Improve initial rendering for nested entry cards on pageload

[mmikkel]

On pageload, it takes a little while before nested entry cards in CKEditor fields appear, as they're rendered over AJAX and injected into the field post load.

This causes the layout to shift a fair bit after the edit view has loaded, as the cards expand the initial height of the CKEditor field as they pop in. In cases where there are a lot of nested entry cards on the page, these layout shifts tend to happen consecutively, sometimes over several seconds, due to the cards being rendered one by one over individual AJAX requests.

This behaviour can also throw off Craft's ability to retain the scroll position when using Cmd+S to quick-save; I assume because the height of the page on unload, is much taller than it is on pageload.

I appreciate that this behaviour might be tough to improve, as I assume there's a good reason why the cards are being rendered via (individual) AJAX requests.

Maybe it'd be possible to render "placeholders" for the nested entry cards on pageload, reserving the vertical space before they are replaced with the actual cards as the AJAX render requests complete? From what I can tell, the cards do seem to have a fixed height, although that fixed height varies based on whether or not there is an image thumbnail in the card or not.

CleanShot.2024-05-07.at.23.00.54.mp4

[brandonkelly]

Fixed in CKEditor 4.0.5!