Blazor Server-Side Progress Bar Not Updating in UI on Azure Deployment

Question

//this code here is within my razor page

 private void HandleProgressChanged(RecordingViewModel recording)
 {
     InvokeAsync(StateHasChanged); 
   
     if (recording.PercentageProgress >= 100)
     {
         TelemetryClient.TrackEvent($"Progress reached 100% for recording {recording.RecordingId}");
     }
     else
     {
         TelemetryClient.TrackEvent($"ProgressValue changed to {recording.PercentageProgress} for recording: {recording.RecordingId}");
     }
 }

 public void Dispose()
 {
     MeetingRecordingService.OnProgressChanged -= HandleProgressChanged;
     TelemetryClient.TrackEvent("OnProgressChanged unsubscribed.");
 }

 protected override async Task OnInitializedAsync()
 {
MeetingRecordingService.OnProgressChanged += HandleProgressChanged;
}

  <AlertDialog @ref="_dialog">

      <HeadingWithIconCentered>
     Uploading Recording
     <span class="sub-heading">@_selectedMeeting?.Subject</span>
 </HeadingWithIconCentered>
 <ms-uploader>
     <label>Uploading</label>
     <progress max="100"
               value="@_currentRecordingUploading.PercentageProgress">@_currentRecordingUploading.PercentageProgress %</progress>
 </ms-uploader>
  </AlertDialog>

I'm facing a peculiar issue with a Blazor Server-Side application where a progress bar does not update on the UI during a file upload process after being deployed to Azure, although backend state changes are correctly reflected in the logs. The progress bar is bound to a RecordingViewModel that tracks the upload progress.

The application is a Microsoft Teams tab used for uploading recordings. The upload progress should be displayed on a progress bar component which binds to the PercentageProgress property of the RecordingViewModel.

When running the application locally, the progress bar updates as expected. However, after deploying to Azure and running it this is not the case. Attached is the relevant code

Jayraj Chhaya · Answer

Cause The issue may be caused by the way the UI is updated in the Blazor Server-Side application. Blazor Server-Side uses a SignalR connection to communicate between the server and the client. When an event is triggered on the server-side, the UI is updated by invoking the StateHasChanged method. However, in some cases, the UI may not be updated properly due to the SignalR connection or other factors. Solution To resolve the issue of the progress bar not updating on the UI during the file upload process after deploying to Azure, you can try the following solutions: Ensure that the StateHasChanged method is invoked correctly after the progress changes. In the provided code, the InvokeAsync(StateHasChanged) is called in the HandleProgressChanged method. This should trigger a UI update. Make sure that this method is being called and that there are no errors or exceptions preventing the UI update. Check the SignalR connection between the server and the client. Ensure that the connection is established and maintained properly. You can use browser developer tools to inspect the network requests and check for any errors or issues related to the SignalR connection. Verify that the OnProgressChanged event is being subscribed to correctly in the OnInitializedAsync method. Make sure that the event handler HandleProgressChanged is being called when the progress changes. You can add logging statements or breakpoints to verify this. Check if there are any JavaScript errors or conflicts that may be affecting the UI update. Use the browser developer tools to check for any console errors or warnings that may be related to the UI update. Ensure that the progress value is correctly passed to the progress bar component. In the provided code, the PercentageProgress property of the RecordingViewModel is used to bind the progress value. Make sure that this property is being updated correctly and that the progress value is within the range of 0 to 100. Consider using the InvokeAsync method when updating the progress value in the UI. This ensures that the UI update is performed asynchronously, which can help with performance and responsiveness.