How to only show a single instance even if a user is able to click button multiple times due to server latency?

[DEO3]

I'm having an issue with a .NET 6 Blazor server application where users who have high server latency (such as on a cell phone with a poor connection) are able to click the 'show modal button' multiple times before the modal is displayed. When this occurs, they then begin to get multiple modals, one on top of another, for each time they were able to click the button.

I've tried a number of solutions:

• Adding an 'isModalShowing' flag to the component that handles the button click that I can check against every time the button is clicked to know whether this is a 'first time click' (and to show the modal) or an 'additional click' (and to ignore).
• Disabling the button on the client as soon as it's clicked via JavaScript and then using JavaScript to call the button click event handler in C# which then shows the modal.
• Adding a semaphore to limit access to the button click handler method to only one 'click' until the modal is showing.

Unfortunately I've had issues with all of the above, because any attempts that I've tried to then 're-enable the button after the modal is showing' seem to occur prematurely, allowing for multiple clicks of the button to still get through.

[DEO3]

While ultimately Blazor WASM would likely be the better choice for an application that might have to deal with high user latency, I believe I've been able to resolve this in my Blazor server application by taking advantage of Blazored Modal's ability to return data, such as when the modal has been closed.

Basically I set an 'isModalShowing' flag to true when the button to show the modal is first clicked. Once that's set to true it will catch any additional clicks. I then I await the modal.Result.Data, which will be returned when the modal is eventually closed. Once I receive the result I know the modal has been closed and I can then continue execution which will set the 'isModalShowing' flag to false to allow for the the modal to be displayed again if needed.

In MyComponent:

<button @onclick="@(() => ShowModal())">Show Modal</button>

@code {
    [CascadingParameter]
    public IModalService Modal { get; set; } = default!;
   
    private bool isModalShowing = false;

    protected async Task ShowModal()
    {
         if (isModalShowing == false)
         {
              isModalShowing = true;

              var modal = Modal.Show<MyModal>();
              var result = await modal.Result;

              isModalShowing = bool.Parse(result.Data.ToString());
         }
    }
}

In MyModal:

 protected async Task CloseModal()
 {
     await BlazoredModal.CloseAsync(ModalResult.Ok(false));
 }