@if (IsVisible)
{
    <div class="loading fixed inset-0 w-full h-full z-50 bg-gray-200 !m-0 !p-0 dark:bg-gray-500">
        <div class="spinner">
            <div class="rect1 bg-gray-900 dark:bg-white"></div>
            <div class="rect2 bg-gray-900 dark:bg-white"></div>
            <div class="rect3 bg-gray-900 dark:bg-white"></div>
            <div class="rect4 bg-gray-900 dark:bg-white"></div>
            <div class="rect5 bg-gray-900 dark:bg-white"></div>
        </div>
    </div>
}

@code {
    private bool IsVisible { get; set; }

    /// <summary>
    /// Shows the loading indicator.
    /// </summary>
    public void Show()
    {
        IsVisible = true;
        StateHasChanged();
    }

    /// <summary>
    /// Hides the loading indicator.
    /// </summary>
    public void Hide()
    {
        IsVisible = false;
        StateHasChanged();
    }
}
