Add Inprogress

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

@@ -6177,6 +6177,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 or sets 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.
+            </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,7 @@
                     TOption="Person"
                     Width="100%"
                     Placeholder="search"
-                    OnOptionsSearch="@OnSearch"
+                    OnOptionsSearch="@OnSearchAsync"
                     MaximumSelectedOptions="3"
                     KeepOpen="true"
                     OptionText="@(item => item.FirstName)"
@@ -48,11 +48,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
@@ -70,8 +71,10 @@
     FluentAutocomplete<Person> ContactList = default!;
     IEnumerable<Person> SelectedItems = Array.Empty<Person>();
 
-    private void OnSearch(OptionsSearchEventArgs<Person> e)
+    private async Task OnSearchAsync(OptionsSearchEventArgs<Person> e)
     {
+        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,7 +71,11 @@
             }
             @if (!Disabled && !ReadOnly)
             {
-                if (this.SelectedOptions?.Any() == true || !string.IsNullOrEmpty(ValueText) || this.SelectedOption is not null)
+                if (_inProgress)
+                {
+                     <FluentProgressRing style="width: 16px; height: 16px;" Slot="end" />
+                }
+                else if (this.SelectedOptions?.Any() == true || !string.IsNullOrEmpty(ValueText) || this.SelectedOption is not null)
                 {
                     if (IconDismiss != null)
                     {
@@ -122,7 +126,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 +152,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.
@@ -288,6 +289,9 @@ protected override async Task InputHandlerAsync(ChangeEventArgs e)
             return;
         }
 
+        _inProgress = true;
+        StateHasChanged();
+
         _shouldRender = false;
 
         ValueText = e.Value?.ToString() ?? string.Empty;
@@ -309,7 +313,7 @@ protected override async Task InputHandlerAsync(ChangeEventArgs e)
         }
         else
         {
-            await this.InvokeOptionsSearchAsync();
+            await InvokeOptionsSearchAsync();
         }
     }
 
@@ -320,6 +324,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 +345,7 @@ public async Task InvokeOptionsSearchAsync()
             await VirtualizationContainer.RefreshDataAsync();
         }
 
+        _inProgress = false;
         await RenderComponentAsync();
     }
 
@@ -691,3 +698,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; }
+}