[Overflow] Add refresh method, add VisibleOnLoad parameter

examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml

@@ -6774,6 +6774,11 @@
             Gets or sets the template to display <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentOverflow.ItemsOverflow"/> elements.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentOverflow.VisibleOnLoad">
+            <summary>
+            To prevent a flickering effect, set this property to False to hide the overflow items until the component is fully loaded.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentOverflow.MoreButtonTemplate">
             <summary>
             Gets or sets the template to display the More button.

examples/Demo/Shared/Pages/Overflow/Examples/OverflowDefaultExample.razor

@@ -1,11 +1,41 @@
 <div style="background-color: var(--neutral-layer-4); overflow: auto; resize: horizontal; padding: 10px;">
-<FluentOverflow Style="width: 100%;">
-    <FluentOverflowItem><FluentBadge>Blazor</FluentBadge></FluentOverflowItem>
-    <FluentOverflowItem><FluentBadge>Microsoft</FluentBadge></FluentOverflowItem>
-    <FluentOverflowItem><FluentBadge>Azure</FluentBadge></FluentOverflowItem>
-    <FluentOverflowItem><FluentBadge>DevOps</FluentBadge></FluentOverflowItem>
-    <FluentOverflowItem><FluentBadge>Framework</FluentBadge></FluentOverflowItem>
-    <FluentOverflowItem><FluentBadge>Office</FluentBadge></FluentOverflowItem>
-    <FluentOverflowItem><FluentBadge>Installation</FluentBadge></FluentOverflowItem>
-</FluentOverflow>
+    <FluentOverflow Style="width: 100%;">
+        <FluentOverflowItem><FluentBadge>Blazor</FluentBadge></FluentOverflowItem>
+        <FluentOverflowItem><FluentBadge>Microsoft</FluentBadge></FluentOverflowItem>
+        <FluentOverflowItem><FluentBadge>Azure</FluentBadge></FluentOverflowItem>
+        <FluentOverflowItem><FluentBadge>DevOps</FluentBadge></FluentOverflowItem>
+        <FluentOverflowItem><FluentBadge>Framework</FluentBadge></FluentOverflowItem>
+        <FluentOverflowItem><FluentBadge>Office</FluentBadge></FluentOverflowItem>
+        <FluentOverflowItem><FluentBadge>Installation</FluentBadge></FluentOverflowItem>
+        <FluentOverflowItem><FluentBadge>Blazor</FluentBadge></FluentOverflowItem>
+        <FluentOverflowItem><FluentBadge>Microsoft</FluentBadge></FluentOverflowItem>
+        <FluentOverflowItem><FluentBadge>Azure</FluentBadge></FluentOverflowItem>
+        <FluentOverflowItem><FluentBadge>DevOps</FluentBadge></FluentOverflowItem>
+        <FluentOverflowItem><FluentBadge>Framework</FluentBadge></FluentOverflowItem>
+        <FluentOverflowItem><FluentBadge>Office</FluentBadge></FluentOverflowItem>
+        <FluentOverflowItem><FluentBadge>Installation</FluentBadge></FluentOverflowItem>
+    </FluentOverflow>
+</div>
+<p>
+    With below example the <code>VisibleOnLoad</code> parameter is set to false.
+    Make sure the screen dimension is small enough to show an overflow badge with count.
+    Then refresh the page to see the difference between this example and the one above
+</p>
+<div style="background-color: var(--neutral-layer-4); overflow: auto; resize: horizontal; padding: 10px;">
+    <FluentOverflow Style="width: 100%;" VisibleOnLoad="false">
+        <FluentOverflowItem><FluentBadge>Blazor</FluentBadge></FluentOverflowItem>
+        <FluentOverflowItem><FluentBadge>Microsoft</FluentBadge></FluentOverflowItem>
+        <FluentOverflowItem><FluentBadge>Azure</FluentBadge></FluentOverflowItem>
+        <FluentOverflowItem><FluentBadge>DevOps</FluentBadge></FluentOverflowItem>
+        <FluentOverflowItem><FluentBadge>Framework</FluentBadge></FluentOverflowItem>
+        <FluentOverflowItem><FluentBadge>Office</FluentBadge></FluentOverflowItem>
+        <FluentOverflowItem><FluentBadge>Installation</FluentBadge></FluentOverflowItem>
+        <FluentOverflowItem><FluentBadge>Blazor</FluentBadge></FluentOverflowItem>
+        <FluentOverflowItem><FluentBadge>Microsoft</FluentBadge></FluentOverflowItem>
+        <FluentOverflowItem><FluentBadge>Azure</FluentBadge></FluentOverflowItem>
+        <FluentOverflowItem><FluentBadge>DevOps</FluentBadge></FluentOverflowItem>
+        <FluentOverflowItem><FluentBadge>Framework</FluentBadge></FluentOverflowItem>
+        <FluentOverflowItem><FluentBadge>Office</FluentBadge></FluentOverflowItem>
+        <FluentOverflowItem><FluentBadge>Installation</FluentBadge></FluentOverflowItem>
+    </FluentOverflow>
 </div>

src/Core/Components/AppBar/FluentAppBar.razor.cs

@@ -79,7 +79,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             // Overflow
             _jsModuleOverflow = await JSRuntime.InvokeAsync<IJSObjectReference>("import", JAVASCRIPT_FILE);
 
-            await _jsModuleOverflow.InvokeVoidAsync("FluentOverflowInitialize", _dotNetHelper, Id, false, OVERFLOW_SELECTOR);
+            await _jsModuleOverflow.InvokeVoidAsync("fluentOverflowInitialize", _dotNetHelper, Id, false, OVERFLOW_SELECTOR);
         }
     }
 

src/Core/Components/Overflow/FluentOverflow.razor.cs

@@ -24,6 +24,7 @@ public partial class FluentOverflow : FluentComponentBase, IAsyncDisposable
 
     /// <summary />
     protected string? StyleValue => new StyleBuilder(Style)
+        .AddStyle("visibility", "hidden", VisibleOnLoad == false)
         .Build();
 
     [Inject]
@@ -41,6 +42,12 @@ public partial class FluentOverflow : FluentComponentBase, IAsyncDisposable
     [Parameter]
     public RenderFragment<FluentOverflow>? OverflowTemplate { get; set; }
 
+    /// <summary>
+    /// To prevent a flickering effect, set this property to False to hide the overflow items until the component is fully loaded.
+    /// </summary>
+    [Parameter]
+    public bool VisibleOnLoad { get; set; } = true;
+
     /// <summary>
     /// Gets or sets the template to display the More button.
     /// </summary>
@@ -88,8 +95,16 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         {
             _jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import", JAVASCRIPT_FILE);
             _dotNetHelper = DotNetObjectReference.Create(this);
+            await _jsModule.InvokeVoidAsync("fluentOverflowInitialize", _dotNetHelper, Id, IsHorizontal, Selectors);
+            VisibleOnLoad = true;
+        }
+    }
 
-            await _jsModule.InvokeVoidAsync("FluentOverflowInitialize", _dotNetHelper, Id, IsHorizontal, Selectors);
+    public async Task RefreshAsync()
+    {
+        if (_jsModule is not null)
+        {
+            await _jsModule.InvokeVoidAsync("fluentOverflowRefresh", _dotNetHelper, Id, IsHorizontal, Selectors);
         }
     }
 

src/Core/Components/Overflow/FluentOverflow.razor.js

@@ -1,7 +1,7 @@
 let resizeObserver;
 let observerAddRemove;
 
-export function FluentOverflowInitialize(dotNetHelper, id, isHorizontal, querySelector) {
+export function fluentOverflowInitialize(dotNetHelper, id, isHorizontal, querySelector) {
     var localSelector = querySelector;
     if (!localSelector) {
         // cannot use :scope for node.matches() further down
@@ -23,13 +23,13 @@ export function FluentOverflowInitialize(dotNetHelper, id, isHorizontal, querySe
                 return;
             }
 
-            FluentOverflowResized(dotNetHelper, id, isHorizontal, querySelector);
+            fluentOverflowRefresh(dotNetHelper, id, isHorizontal, querySelector);
         });
     });
 
     // Create a ResizeObserver, started later
     resizeObserver = new ResizeObserver((entries) => {
-        FluentOverflowResized(dotNetHelper, id, isHorizontal, querySelector);
+        fluentOverflowRefresh(dotNetHelper, id, isHorizontal, querySelector);
     });
 
     // Start the resize observation
@@ -42,7 +42,7 @@ export function FluentOverflowInitialize(dotNetHelper, id, isHorizontal, querySe
 
 // When the Element[id] is resized, set overflow attribute to all element outside of this element.
 // Except for elements with fixed attribute.
-export function FluentOverflowResized(dotNetHelper, id, isHorizontal, querySelector) {
+export function fluentOverflowRefresh(dotNetHelper, id, isHorizontal, querySelector) {
     let container = document.getElementById(id);                                  // Container
     if (!container) return;
 
@@ -61,6 +61,8 @@ export function FluentOverflowResized(dotNetHelper, id, isHorizontal, querySelec
     let containerGap = parseFloat(window.getComputedStyle(container).gap);
     if (!containerGap) containerGap = 0;
 
+    containerMaxSize -= 25; // Account for the overflow bage width
+
     // Size of all fixed elements
     fixedItems.forEach(element => {
         element.overflowSize = isHorizontal ? getElementWidth(element) : getElementHeight(element);

src/Core/Components/Tabs/FluentTabs.razor.cs

@@ -149,7 +149,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
                 "./_content/Microsoft.FluentUI.AspNetCore.Components/Components/Overflow/FluentOverflow.razor.js");
 
             var horizontal = Orientation == Orientation.Horizontal;
-            await _jsModuleOverflow.InvokeVoidAsync("FluentOverflowInitialize", _dotNetHelper, Id, horizontal, FLUENT_TAB_TAG);
+            await _jsModuleOverflow.InvokeVoidAsync("fluentOverflowInitialize", _dotNetHelper, Id, horizontal, FLUENT_TAB_TAG);
         }
     }