[Autocomplete] Add a ShowProgressIndicator parameter + Breaking change

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

@@ -6065,6 +6065,13 @@
             Gets or sets whether the dropdown is shown when there are no items.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentAutocomplete`1.ShowProgressIndicator">
+            <summary>
+            Gets or sets whether the component will display a progress indicator while fetching data.
+            A progress ring will be shown ad the end of the component, when the <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentAutocomplete`1.OnOptionsSearch"/> is invoked.
+            You can customize the progress indicator by using the <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentAutocomplete`1.HeaderContent"/> or <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentAutocomplete`1.FooterContent"/> parameters: see <see cref="P:Microsoft.FluentUI.AspNetCore.Components.HeaderFooterContent`1.InProgress"/>.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentAutocomplete`1.Virtualize">
              <summary>
              If true, the options list will be rendered with virtualization. This is normally used in conjunction with
@@ -6177,6 +6184,19 @@
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentAutocomplete`1.MustBeClosed">
             <summary />
         </member>
+        <member name="T:Microsoft.FluentUI.AspNetCore.Components.HeaderFooterContent`1">
+            <summary />
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.HeaderFooterContent`1.InProgress">
+            <summary>
+            Gets a value indicating whether the operation is currently in progress.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.HeaderFooterContent`1.Items">
+            <summary>
+            Gets the items to display in the header or footer.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentCombobox`1.LibraryConfiguration">
             <summary />
         </member>

examples/Demo/Shared/Pages/List/Autocomplete/Examples/AutocompleteCustomized.razor

@@ -5,7 +5,8 @@
                     TOption="Person"
                     Width="100%"
                     Placeholder="search"
-                    OnOptionsSearch="@OnSearch"
+                    OnOptionsSearch="@OnSearchAsync"
+                    ShowProgressIndicator="@ShowProgressIndicator"
                     MaximumSelectedOptions="3"
                     KeepOpen="true"
                     OptionText="@(item => item.FirstName)"
@@ -48,11 +49,12 @@
                      Style="padding: 8px; font-size: 11px; border-bottom: 1px solid var(--neutral-fill-stealth-hover);">
             Suggested contacts
         </FluentLabel>
+        <FluentProgress Style="@($"visibility: {(context.InProgress ? "visible" : "collapse")}")" />
     </HeaderContent>
 
     @* Content display at the bottom of the Popup area *@
     <FooterContent>
-        @if (!context.Any())
+        @if (!context.Items.Any())
         {
             <FluentLabel Style="font-size: 11px; text-align: center; width: 200px;">
                 No results found
@@ -65,13 +67,23 @@
     <b>Selected</b>: @(String.Join(" - ", SelectedItems.Select(i => i.LastName)))
 </p>
 
+<p>
+    <FluentSwitch @bind-Value="@ShowProgressIndicator" Label="ShowProgressIndicator" />
+</p>
+
 @code
 {
+    bool ShowProgressIndicator = false;
     FluentAutocomplete<Person> ContactList = default!;
     IEnumerable<Person> SelectedItems = Array.Empty<Person>();
 
-    private void OnSearch(OptionsSearchEventArgs<Person> e)
+    private async Task OnSearchAsync(OptionsSearchEventArgs<Person> e)
     {
+        if (ShowProgressIndicator)
+        {
+            await Task.Delay(500); // Simulate a delay for the search operation
+        }
+
         e.Items = Data.People.Where(i => i.LastName.StartsWith(e.Text, StringComparison.OrdinalIgnoreCase) ||
                                          i.FirstName.StartsWith(e.Text, StringComparison.OrdinalIgnoreCase))
                              .OrderBy(i => i.LastName);

src/Core/Components/List/FluentAutocomplete.razor

@@ -71,6 +71,11 @@
             }
             @if (!Disabled && !ReadOnly)
             {
+                if (ShowProgressIndicator && _inProgress)
+                {
+                     <FluentProgressRing style="width: 16px; height: 16px;" Slot="end" />
+                }
+
                 if (this.SelectedOptions?.Any() == true || !string.IsNullOrEmpty(ValueText) || this.SelectedOption is not null)
                 {
                     if (IconDismiss != null)
@@ -122,7 +127,7 @@
                                   Shadow="ElevationShadow.Flyout">
                 @if (HeaderContent != null)
                 {
-                        @HeaderContent(Items ?? Array.Empty<TOption>())
+                    @HeaderContent(new HeaderFooterContent<TOption>(Items, _inProgress))
                 }
 
                 <div id="@IdPopup" role="listbox" style="@ListStyleValue" tabindex="0">
@@ -148,7 +153,7 @@
 
                 @if (FooterContent != null)
                 {
-                        @FooterContent(Items ?? Array.Empty<TOption>())
+                    @FooterContent(new HeaderFooterContent<TOption>(Items, _inProgress))
                 }
             </FluentAnchoredRegion>
         }

src/Core/Components/List/FluentAutocomplete.razor.cs

@@ -26,6 +26,7 @@ public partial class FluentAutocomplete<TOption> : ListComponentBase<TOption> wh
     private Virtualize<TOption>? VirtualizationContainer { get; set; }
     private readonly Debounce _debounce = new();
     private bool _shouldRender = true;
+    private bool _inProgress;
 
     /// <summary>
     /// Initializes a new instance of the <see cref="FluentAutocomplete{TOption}"/> class.
@@ -142,13 +143,13 @@ public override string? Value
     /// Gets or sets the header content, placed at the top of the popup panel.
     /// </summary>
     [Parameter]
-    public RenderFragment<IEnumerable<TOption>>? HeaderContent { get; set; }
+    public RenderFragment<HeaderFooterContent<TOption>>? HeaderContent { get; set; }
 
     /// <summary>
     /// Gets or sets the footer content, placed at the bottom of the popup panel.
     /// </summary>
     [Parameter]
-    public RenderFragment<IEnumerable<TOption>>? FooterContent { get; set; }
+    public RenderFragment<HeaderFooterContent<TOption>>? FooterContent { get; set; }
 
     /// <summary>
     /// Gets or sets the title and Aria-Label for the Scroll to previous button.
@@ -180,6 +181,14 @@ public override string? Value
     [Parameter]
     public bool ShowOverlayOnEmptyResults { get; set; } = true;
 
+    /// <summary>
+    /// Gets or sets whether the component will display a progress indicator while fetching data.
+    /// A progress ring will be shown ad the end of the component, when the <see cref="OnOptionsSearch"/> is invoked.
+    /// You can customize the progress indicator by using the <see cref="HeaderContent"/> or <see cref="FooterContent"/> parameters: see <see cref="HeaderFooterContent{TOption}.InProgress"/>.
+    /// </summary>
+    [Parameter]
+    public bool ShowProgressIndicator { get; set; }
+
     /// <summary>
     /// If true, the options list will be rendered with virtualization. This is normally used in conjunction with
     /// scrolling and causes the option list to fetch and render only the data around the current scroll viewport.
@@ -288,6 +297,9 @@ protected override async Task InputHandlerAsync(ChangeEventArgs e)
             return;
         }
 
+        _inProgress = true;
+        StateHasChanged();
+
         _shouldRender = false;
 
         ValueText = e.Value?.ToString() ?? string.Empty;
@@ -309,7 +321,7 @@ protected override async Task InputHandlerAsync(ChangeEventArgs e)
         }
         else
         {
-            await this.InvokeOptionsSearchAsync();
+            await InvokeOptionsSearchAsync();
         }
     }
 
@@ -320,6 +332,8 @@ protected override async Task InputHandlerAsync(ChangeEventArgs e)
     /// <returns></returns>
     public async Task InvokeOptionsSearchAsync()
     {
+        _inProgress = true;
+
         var args = new OptionsSearchEventArgs<TOption>()
         {
             Items = Items ?? Array.Empty<TOption>(),
@@ -339,6 +353,7 @@ public async Task InvokeOptionsSearchAsync()
             await VirtualizationContainer.RefreshDataAsync();
         }
 
+        _inProgress = false;
         await RenderComponentAsync();
     }
 
@@ -691,3 +706,23 @@ private bool MustBeClosed()
         return false;
     }
 }
+
+/// <summary />
+public class HeaderFooterContent<TOption>
+{
+    internal HeaderFooterContent(IEnumerable<TOption>? items, bool inProgress)
+    {
+        Items = items ?? Array.Empty<TOption>();
+        InProgress = inProgress;
+    }
+
+    /// <summary>
+    /// Gets a value indicating whether the operation is currently in progress.
+    /// </summary>
+    public bool InProgress { get; init; }
+
+    /// <summary>
+    /// Gets the items to display in the header or footer.
+    /// </summary>
+    public IEnumerable<TOption> Items { get; init; }
+}

tests/Core/DataGrid/FluentDataGridIsFixedTests.razor

@@ -47,6 +47,8 @@
     [Fact]
     public async Task FluentDataGrid_IsFixed_True_Allows_Data_Changes_Without_Automatic_Refresh()
     {
+        await Task.CompletedTask;
+
         // Arrange
         var items = GetCustomers().AsQueryable();
 

tests/Core/List/FluentAutocompleteTests.razor

@@ -74,6 +74,7 @@
 
         async Task OnSearchValueChanged(OptionsSearchEventArgs<Customer> e)
         {
+            await Task.CompletedTask;
             e.Items = customers;
             if (!string.IsNullOrWhiteSpace(externalSearchString))
                 e.Items = customers.Where(x => x.Name.Contains(externalSearchString));
@@ -164,7 +165,7 @@
             // Add a HeaderContent template
             parameters.Add(p => p.HeaderContent, context =>
                 {
-            return $"<header>Please, select an item</header>";
+                    return $"<header>Please, select an item</header>";
                 });
 
             // Add an Item template
@@ -176,7 +177,7 @@
             // Add a FooterContent template
             parameters.Add(p => p.FooterContent, context =>
                 {
-            return $"<footer>{context.Count()} items found</footer>";
+                    return $"<footer>{context.Items.Count()} items found</footer>";
                 });
 
             parameters.Add(p => p.Items, Customers.Get());
@@ -475,6 +476,7 @@
     [Fact]
     public async Task FluentAutocomplete_MultipleEqualsFalse()
     {
+        await Task.CompletedTask;
         Customer? SelectedItem = Customers.Get().First();
 
         // Arrange