-
Notifications
You must be signed in to change notification settings - Fork 649
Description
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.