[Toolbar]: AlwaysOverflow toolbar children are visible before toolbar resizes

[stephen-schmith]

Bug Description

If I add multiple ToolbarButton components into a Toolbar with the overflow-priority property set to AlwaysOverflow on some of them, the AlwaysOverflow buttons are still briefly visible before the Toolbar resize handler is triggered. We're receiving bug reports internally at SAP SF for this.

This issue is especially visible on low power devices, which can be simulated by using CPU throttling in the Chrome dev tools (on my Intel i9 MacBook, 6x CPU throttling makes the issue easily visible). I've linked a simple StackBlitz where I was able to replicate the issue without any external dependencies.

Affected Component

Toolbar

Expected Behaviour

AlwaysOverflow children presumably shouldn't be visible at any time.

Isolated Example

https://stackblitz.com/edit/ui5-webcomponents-yiljtwnh?file=index.html,package.json,index.ts

Steps to Reproduce

1. Create a toolbar component.
2. Add toolbar buttons with the overflow-priority set to "AlwaysOverflow"
3. Observe the issue.

Log Output, Stack Trace or Screenshots

Priority

Medium

UI5 Web Components Version

2.10.0, 2.13.0

Browser

Chrome

Operating System

macOS

Additional Context

No response

Organization

SAP SuccessFactors

Declaration

• I’m not disclosing any internal or sensitive information.

[StefanDimitrov04]

Hello @SAP/ui5-webcomponents-topic-p,

Could you take a look at this issue?

The customer reports that ToolbarButtons with overflow-priority="AlwaysOverflow" are briefly visible in the toolbar on initial load before being moved to the overflow area. This flicker is especially noticeable on low-end devices.

From what I observed, the overflow layout is applied after initial rendering, so AlwaysOverflow items are first rendered in the visible area and then moved.

The issue is reproducible in the provided sample- when reloading the page, the AlwaysOverflow items briefly appear in the toolbar before being moved to the overflow, resulting in a visible flicker.

Best Regards,
Stefan

[stephen-schmith]

@kineticjs - Do you have any updates on this ticket?