Skip to content

Avoid flickering when calculating ActionBar overflow #7447

@iansan5653

Description

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions