BusyState

app.js

window.showDialog = (id) => {
    document.getElementById(id).showModal();
}

window.closeDialog = (id) => {
    document.getElementById(id).close();
}

Index.razor

@page "/"

<button class="btn btn-primary" @onclick="OnExecuteClock">Execute</button>

@code {
    [CascadingParameter]
    [AllowNull]
    public ProgressState Progress { get; set; }

    private async Task OnExecuteClock()
    {
        Progress.IsBusy = true;
        await Task.Delay(3000);
        Progress.IsBusy = false;
    }
}

ProgressState.cs

using System.ComponentModel;
using System.Runtime.CompilerServices;

public class ProgressState : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler? PropertyChanged;

    private bool isBusy;

    public bool IsBusy
    {
        get => isBusy;
        set
        {
            if (isBusy != value)
            {
                isBusy = value;
                OnPropertyChanged();
            }
        }
    }

    protected virtual void OnPropertyChanged([CallerMemberName] string? propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

ProgressView.razor

@implements IDisposable
@inject IJSRuntime Script
<CascadingValue Value="@progress">
    @ChildContent
</CascadingValue>
<dialog id="loading" class="loading" style="visibility: @visibility"></dialog>

@code {
    private readonly ProgressState progress = new();

    [Parameter]
    [AllowNull]
    public RenderFragment ChildContent { get; set; }

    private string visibility = "hidden";

    protected override void OnInitialized()
    {
        progress.PropertyChanged += ProgressOnPropertyChanged;
    }

    public void Dispose()
    {
        progress.PropertyChanged -= ProgressOnPropertyChanged;
    }

    private void ProgressOnPropertyChanged(object? sender, PropertyChangedEventArgs e)
    {
        StateHasChanged();
        visibility = progress.IsBusy ? "visible" : "hidden";
        Script.InvokeVoidAsync(progress.IsBusy ? "showDialog" : "closeDialog", "loading");
    }
}

ProgressView.razor.css

.loading {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border: 0;
    margin: 0;
    padding: 0;
    background-color: #fff;
    opacity: 0.5;
}