Add ShowProgressIndicator

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
@@ -6182,12 +6189,12 @@
         </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.HeaderFooterContent`1.InProgress">
             <summary>
-            Gets or sets a value indicating whether the operation is currently in progress.
+            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 or sets the items to display in the header or footer.
+            Gets the items to display in the header or footer.
             </summary>
         </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentCombobox`1.LibraryConfiguration">

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

@@ -6,6 +6,7 @@
                     Width="100%"
                     Placeholder="search"
                     OnOptionsSearch="@OnSearchAsync"
+                    ShowProgressIndicator="@ShowProgressIndicator"
                     MaximumSelectedOptions="3"
                     KeepOpen="true"
                     OptionText="@(item => item.FirstName)"
@@ -66,14 +67,22 @@
     <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 async Task OnSearchAsync(OptionsSearchEventArgs<Person> e)
     {
-        await Task.Delay(500); // Simulate a delay for the search operation
+        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))

src/Core/Components/List/FluentAutocomplete.razor

@@ -71,11 +71,12 @@
             }
             @if (!Disabled && !ReadOnly)
             {
-                if (_inProgress)
+                if (ShowProgressIndicator && _inProgress)
                 {
                      <FluentProgressRing style="width: 16px; height: 16px;" Slot="end" />
                 }
-                else if (this.SelectedOptions?.Any() == true || !string.IsNullOrEmpty(ValueText) || this.SelectedOption is not null)
+
+                if (this.SelectedOptions?.Any() == true || !string.IsNullOrEmpty(ValueText) || this.SelectedOption is not null)
                 {
                     if (IconDismiss != null)
                     {

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

@@ -181,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.