Fix two loads in QuickGrid with Virtualize (#63616)

Author: dariatiurina

src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/QuickGrid.razor.cs

@@ -155,6 +155,8 @@ public partial class QuickGrid<TGridItem> : IAsyncDisposable
     // If the QuickGrid is disposed while the JS module is being loaded, we need to avoid calling JS methods
     private bool _wasDisposed;
 
+    private bool _firstRefreshDataAsync = true;
+
     /// <summary>
     /// Constructs an instance of <see cref="QuickGrid{TGridItem}"/>.
     /// </summary>
@@ -311,6 +313,13 @@ public async Task RefreshDataAsync()
     // because in that case there's going to be a re-render anyway.
     private async Task RefreshDataCoreAsync()
     {
+        // First render of Virtualize component will handle the data load itself.
+        if (_firstRefreshDataAsync && Virtualize)
+        {
+            _firstRefreshDataAsync = false;
+            return;
+        }
+
         // Move into a "loading" state, cancelling any earlier-but-still-pending load
         _pendingDataLoadCancellationTokenSource?.Cancel();
         var thisLoadCts = _pendingDataLoadCancellationTokenSource = new CancellationTokenSource();

src/Components/test/E2ETest/Tests/QuickGridTest.cs

@@ -166,7 +166,7 @@ public void RowStyleApplied()
         const p = document.querySelector('tbody > tr:first-child > td:nth-child(5)');
         return p ? getComputedStyle(p).textAlign : null;"));
     }
-    
+
     [Fact]
     public void CanOpenColumnOptions()
     {
@@ -208,4 +208,11 @@ public void CanCloseColumnOptionsByHideColumnOptionsAsync()
         var firstNameSearchSelector = "#grid > table > thead > tr > th:nth-child(2) input[type=search]";
         Browser.DoesNotExist(By.CssSelector(firstNameSearchSelector));
     }
+
+    [Fact]
+    public void ItemsProviderCalledOnceWithVirtualize()
+    {
+        app = Browser.MountTestComponent<QuickGridVirtualizeComponent>();
+        Browser.Equal("1", () => app.FindElement(By.Id("items-provider-call-count")).Text);
+    }
 }

src/Components/test/testassets/BasicTestApp/Index.razor

@@ -94,6 +94,7 @@
         <option value="@GetTestServerProjectComponent("Components.TestServer.ProtectedBrowserStorageUsageComponent")">Protected browser storage usage</option>
         <option value="@GetTestServerProjectComponent("Components.TestServer.ProtectedBrowserStorageInjectionComponent")">Protected browser storage injection</option>
         <option value="BasicTestApp.QuickGridTest.SampleQuickGridComponent">QuickGrid Example</option>
+        <option value="BasicTestApp.QuickGridTest.QuickGridVirtualizeComponent">QuickGrid with Virtualize Example</option>
         <option value="BasicTestApp.RazorTemplates">Razor Templates</option>
         <option value="BasicTestApp.Reconnection.ReconnectionComponent">Reconnection server-side blazor</option>
         <option value="BasicTestApp.RedTextComponent">Red text</option>

src/Components/test/testassets/BasicTestApp/QuickGridTest/QuickGridVirtualizeComponent.razor

@@ -0,0 +1,36 @@
+@using Microsoft.AspNetCore.Components.QuickGrid
+@using System.Linq
+
+<p id="items-provider-call-count">@ItemsProviderCallCount</p>
+
+<div id="grid" style="height: 200px; overflow: auto">
+    <QuickGrid ItemsProvider="@itemsProvider" Virtualize="true" ItemSize="50">
+        <PropertyColumn Property="@(p => p.Id)" />
+        <PropertyColumn Property="@(p => p.Name)" />
+    </QuickGrid>
+</div>
+
+@code {
+    internal class Person
+    {
+        public int Id { get; set; }
+        public string Name { get; set; } = string.Empty;
+    }
+
+    private GridItemsProvider<Person> itemsProvider = default!;
+
+    int ItemsProviderCallCount = 0;
+
+    protected override void OnInitialized()
+    {
+        itemsProvider = async request =>
+        {
+            await Task.CompletedTask;
+            Interlocked.Increment(ref ItemsProviderCallCount);
+            StateHasChanged();
+            return GridItemsProviderResult.From(
+                items: Enumerable.Range(1, 100).Select(i => new Person { Id = i, Name = $"Person {i}" }).ToList(),
+                totalItemCount: 100);
+        };
+    }
+}