@if (Loaded)
{
    @ChildContent
}
else
{
    if (ShowAsCard)
    {
        <div class="card card-body">
            <div class="d-flex justify-content-center py-4">
                <span class="fs-1 spinner-border spinner-border-lg align-middle me-2"></span>
                <span class="mt-3 fs-5">@(Text)</span>
            </div>
        </div>
    }
    else
    {
        <div class="d-flex justify-content-center py-4">
            <span class="fs-1 spinner-border spinner-border-lg align-middle me-2"></span>
            <span class="mt-3 fs-5">@(Text)</span>
        </div>
    }
}

@code
{
    [Parameter]
    public RenderFragment ChildContent { get; set; }

    [Parameter]
    public bool ShowAsCard { get; set; } = false;

    [Parameter]
    public Func<LazyLoader, Task> Load { get; set; }

    [Parameter]
    public string Text { get; set; } = "";

    private bool Loaded = false;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await Load.Invoke(this);
            Loaded = true;
            await InvokeAsync(StateHasChanged);
        }
    }

    public async Task SetText(string text)
    {
        Text = text;
        await InvokeAsync(StateHasChanged);
    }

    public async Task Reload()
    {
        Loaded = false;
        await InvokeAsync(StateHasChanged);
        await Load.Invoke(this);
        Loaded = true;
        await InvokeAsync(StateHasChanged);
    }
}