Contrib.social

Reduce toolbar reflow/repaint due to username lazy builder

Open on Drupal.org →
Created on 6 January 2023, about 2 years ago
Updated 23 January 2023, almost 2 years ago

Problem/Motivation

When authenticated, the toolbar's user button displays the username. This username is delivered via a #lazy_builder, which makes it possible for the toolbar to load without waiting on the logic that retrieves the username. I believe that was implemented to improve perceived performance/load time, but in this case it may be adversely impacting perceived AND actual performance more than it benefits it.

When the toolbar loads, before the lazy builder has completed, the user button is empty, and the icon is incorrectly positioned as the styles are dependent on the button having text content.

When the lazy builder completes, the icon is moved to the correct position and the width of the button changes. At best, the icon moving causes a visually jarring flicker that adversely impacts perceived performance. It may also require a reflow/repaint which would be an objective performance hit. The width of the button changing definitely causes a reflow/repaint due to the width changing. If there are items to the right of this button, it will slow the repaint process to the browser needing calculate the new positions.

These rendering performance problems could also be addressed with just CSS by min-width-ing the user button so the width is unchanged, but that would need account for long usernames and would result in big buttons for little names.

I removed the lazy builder for the user button title and it only seems to benefit the perceived load performance of the toolbar - and certainly stops an objectively expensive reflow/repaint.

Steps to reproduce

Proposed resolution

Remove the lazy builder for the user button title?

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

📌 Task
Status

Closed: works as designed

Version

10.1 ✨

Component
User module  →

Last updated 7 days ago

Created by

🇺🇸United States bnjmnm Ann Arbor, MI

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Comment almost 2 years ago →
    🇫🇮Finland lauriii Finland

    Removing the lazy builder could certainly help with the repaint but would likely cause other issues. 🤔 It looks like the removal of the lazy builder would require us to change the cache contexts because currently the only cache context that the user_toolbar is setting is user.roles:anonymous. The required cache context would be user since the toolbar item contains the name of the currently logged in user.

    Adding the user context would re-introduce #2899392: user_hook_toolbar() makes all pages uncacheable → and should lead into \Drupal\Tests\toolbar\Functional\ToolbarCacheContextsTest::testCacheIntegration failing. 😭 Even with auto-placeholdering this would lead into more problems than it's solving because this would likely make the whole toolbar flicker. I'm personally leaning towards the approach similar to what is being proposed in 🐛 Improve rendering account link in the toolbar Fixed since it's less likely to have adverse side-effects.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024