Blazor virtualization placeholder doesn't work

Question

I'm practicing with Blazor. Now is the Virtualize turn. I copy an example and I modified it. When I try to use the Virtualize tag, working fine, but when I want to add a Placeholder tag, it doesn't work. Is there a general bug or that? Now I will publish the code:

amaurys.razor.cs

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web.Virtualization;

namespace BlazorApp1.Pages
{
    public partial class Amaurys
    {
        private List<Car> cars;
        public EventCallback LoadCarsEvent { get; set; }

        public void OnButtonAClicked()
        {
            LoadCarsEvent.InvokeAsync();
        }

        public void AnswerASelected()
        {
            MakeTenThousandCars();
        }

        protected override async Task OnInitializedAsync()
        {
            cars = await MakeTenThousandCars();
        }

        private async Task<List<Car>> MakeTenThousandCars()
        {
            List<Car> myCarList = new List<Car>();

            for (int i = 0; i < 10000; i++)
            {
                var car = new Car()
                {
                    Id = Guid.NewGuid(),
                    Name = $"Car {i}",
                    Cost = i * 100
                };

                myCarList.Add(car);
            }
            return await Task.FromResult(myCarList);
        }

        private async ValueTask<ItemsProviderResult<Car>> LoadCars(ItemsProviderRequest request)
        {
            var cars = await MakeTenThousandCars();
            int milliseconds = 2000;
            //Thread.Sleep(milliseconds);
            return new ItemsProviderResult<Car>(cars.Skip(request.StartIndex).Take(request.Count), cars.Count());
        }

        public class Car
        {
            public Guid Id { get; set; }
            public string Name { get; set; }
            public int Cost { get; set; }
        }
    }
}

amaurys.razor

@page "/amaurys"
@inject HttpClient Http

<PageTitle>Virtualize Example</PageTitle>

<h1>Virtualize Example</h1>

<p>Parapipo.</p>

<button @onclick="@OnButtonAClicked" />

@if(LoadCars == null)
{
    <tr class="amarillo">
        <td>
            Loading item...
        </td>
    </tr>
}
else
{
    <Virtualize Context="car" ItemsProvider="@LoadCars">
        <ItemContent>
            <tr class="test">
                <td>@car.Id</td>
                <td>@car.Name</td>
                <td>@car.Cost</td>
            </tr>
        </ItemContent>
         <Placeholder>
            <tr class="amarillo">
                <td>
                    Loading item...
                </td>
            </tr>
        </Placeholder>
    </Virtualize>
}

<style>
    .test {
        background-color:red;
    }
    .amarillo {
        background-color: yellow;
    }
 </style>

If you have any question just let me now. TIA! :)

Answer 1

I think you should use await Task.Delay() instead of Thread.Sleep() to simulate loading data

in this method:

private async ValueTask<ItemsProviderResult<Car>> LoadCars(ItemsProviderRequest request)
        {
            var cars = await MakeTenThousandCars();
            int milliseconds = 2000;
            //Thread.Sleep(milliseconds);
            return new ItemsProviderResult<Car>(cars.Skip(request.StartIndex).Take(request.Count), cars.Count());
        }

Now I could see the placeholder: