Issue with latency in server-side blazor application

I am experiencing an inconsistent behavior in my blazor server-side application across environments. Below is my issue:

Users click a button that does some async processing. Before processing is started, I turn on "showWaitDialog" variable so that users can see a modal dialog while processing is being done. It takes at least two seconds before the modal dialog appears. This is more prominent on the server than my local host. Users are able to click the button multiple times and I want to avoid that.

Below is simplified code and I replaced my long running task with thread.sleep for illustration purposes. my long running task makes a call to database.

public async Task JoinRoom()
{
  _isShowWaitDialog = true;
  await Task.Delay(1);  // allow the GUI to catch up

  await DoLongWork();

  _isShowWaitDialog = false;
  await Task.Delay(1);  // allow the GUI to catch up
}

Task DoLongWork()
{
   System.Threading.Thread.Sleep(6000);
   return Task.CompletedTask;
}

razor:

.
.
<ProgressMessageModal WaitDialogParameter="@_isShowWaitDialog" />
.
.
@if (SelectedRoom != null)
{
   <div class="col-sm-1">
     <div class="form-group">
       <button type="button" class="btn btn-info" @onclick="JoinRoom">&nbsp;Join&nbsp;</button>
     </div>
   </div>
}

Progress modal dialog does not show until after two seconds from the time they click Join button.

On my local host it takes 1 second for the progress modal to show whereas on the server it takes 2 seconds before I can see the progress modal dialog.

I verified in IIS manager on server and Web Sockets protocol is enabled.

Any pointers? What am I missing?