Avoid flickering when calculating `ActionBar` overflow

[iansan5653]

On initial render, when ActionBar doesn't know how many items it can fit in the allotted space yet, it renders all items and then uses their width to determine the result. This strategy works well, but results in a flicker on initial render on small screens, as all items are visible at first and then some disappear.

This is especially noticeable on slower devices - in the following video I've enabled 20x CPU throttling in Chrome's devtools:

Screen.Recording.2026-01-12.at.2.45.52.PM.mov

This flickering is distracting and feels broken.

I think a low-effort approach to avoiding this would be to simply perform the initial render with visibility: hidden. While this wouldn't actually get rid of the problem, it would hide it by simply showing an empty toolbar for a very short time, which is much less disruptive as there is no flicker.

After the initial calculations are complete, the component could simply remove the styles.

[saketgoswami09]

I can confirm the flicker on small screens.
I’m planning to try a fix that hides the Action Bar during the initial overflow measurement ( visibility: hidden until widths are calculated).
Let me know if there’s a preferred approach