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

Command icon 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

catch created an issue. See original summary.

catch’s picture

Status: Active » Needs work

I have pushed up an MR that does not work:

- it does create a placeholder preview
- it does not prevent any layout shift

catch’s picture

Issue summary: View changes
plopesc’s picture

The 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:

  public function buildNavigation(array &$page_top): void {
    $page_top['navigation'] = [
        '#type' => 'html_tag',
        '#tag' => 'aside',
        '#attributes' => [
          'class' => ['admin-toolbar'],
          'id' => 'admin-toolbar',
        ],
        'child' => [
          '#type' => 'container',
          '#attributes' => [
            'class' => ['admin-toolbar__displace-placeholder'],
          ],
        ],
    ];
  }

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.

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.

catch’s picture

since 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.