@page "/CardDemo"

@if (CardTitles == null || CardTitles.Count == 0)
{
    <div class="row">
        <div class="col-12 my-2 alert alert-secondary fs-3">
            waiting on browser
        </div>
        @for (int i = 0; i < 9; i++)
        {
            <div class="col-4 my-2">
                <CardTest Title="Loading" DoPlaceholder="true" CardCss="bg-secondary">
                </CardTest>
            </div>
        }
    </div>
}
else
{

    <div class="row">
        <div class="col-12 my-2 alert alert-success fs-3">
            loaded on browser
        </div>
        @foreach (var item in CardTitles)
        {
            <div class="col-4 my-2">
                <CardTest Title="@item">
                    <div>
                        Demo content page for <b>@item</b>
                    </div>
                    <div>
                        This is an example Blazor component!
                    </div>
                </CardTest>
            </div>
        }
    </div>
}

@code {

    protected List<string>? CardTitles { get; set; }

    protected override async Task OnInitializedAsync()
    {
        CardTitles = null;
        await Task.Delay(300);
        CardTitles = new List<string>();
        await InvokeAsync(StateHasChanged);
        await Task.Delay(300);
        for (int i = 0; i < 9; i++)
        {
            CardTitles.Add($"Card {i + 1:00}");
        }
        await Task.Delay(10);
    }
}