Problem/Motivation
After #3493911: Add a CachedPlaceholderStrategy to optimize render cache hits and reduce layout shift from big pipe and #3504386: Use a placeholder for the navigation toolbar the navigation toolbar is rendered in a placeholder, but also that placeholder bypasses bigpipe when the render cache for is warm.
This however means there is some layout shift when the render cache for the navigation toolbar is cold - which will be rare, however it will happen on the first request after installing the navigation toolbar / installing Drupal, immediately after a full cache clear etc.
If possible, we should add a lazy_builder_preview to reduce or eliminate the layout shift. The contents of the toolbar would still be replaced by the placeholder, but it would be less jank.
The first request with a completely cold cache is pretty janky anyway, so don't think this is a high priority if it's hard, but if it's straightforward enough, it would be nice.
Steps to reproduce
Proposed resolution
Remaining tasks
User interface changes
Introduced terminology
API changes
Data model changes
Release notes snippet
Issue fork drupal-3505610
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #2
catchI have pushed up an MR that does not work:
- it does create a placeholder preview
- it does not prevent any layout shift
Comment #4
catchComment #5
plopescThe idea is great and the code in the MR looks sensible to me.
However, I have not been able to find a way to make it work. This is probably out of my limited FE knowledge.
Adding some debugging information that could be useful for a FE development who could take a look into this:
Replace code in NavigationRenderer::buildNavigation() by something similar to this:
When any page is loaded, the space for the navigation bar should be reserved, but empty.
Once that behavior is achieved, that chunk of HTML should be moved to the '#lazy_builder_preview' render array property in the original output.
Comment #7
catchsince two of us are stumped here, went ahead and opened #3585957: Prevent the navigation sidebar being rendered via big pipe which fixes the jank issue in a more blunt force way. Even if that goes in, this issue would be a better option once we can work it out.