fix: FluentOverflow initially paints and then repaints if an overflow is detected, leading to a flash in FluentOverflow

[adamint]

🐛 Bug Report

As mentioned in title, this is caused by FluentOverflow components initially painting and then re-painting, leading to the flash you mention. This can also be seen on initial page load in any FluentOverflow component, including the example component here if you make the browser width small enough.

FluentOverflow should not visibly paint and then repaint on first component render. Perhaps it could paint but have visibility: hidden, calculate whether overflow should be applied, and then make itself visible.

💻 Repro or Code Sample

Make screen width on this page small enough such that component will have the overflow button appear immediately after component load. Notice a flash.
 

🔦 Context

Appears in dotnet/aspire#4417

🌍 Your Environment

Windows, Edge (latest stable), v4.8.0

[vnbaaij]

The overflow component needs to initialize and assess which items don't fit and then hide them. This is what is causing the 'flash'. You see it rendering and then it must repaint itself to hide the badges that are outside of the viewable area.
I'm not considering this a bug but more a consequence of the way this component works.

Initially setting visibility: hidden and then changing that once calculations are done, works but does not lead to a better result in my opinion as the 'flash' is then much more prominent with the whole block appearing.

Before

After

Maybe the effect is less visible with a different background color/other styling.

Shall we create a parameter so that the developer can choose which behavior the component uses? Something like VisibleOnLoad with a default of true to not break existing usage.

[vnbaaij]

New parameter added with PR #2236