Dialog closes itself on load page but not on full page refresh

Radzen.Blazor Components
1

Hi,
I am trying to write some code to handle showing a busy dialog while a page is loading over the page. I have simplified my issue below to the demo the problem.

protected override async Task OnInitializedAsync()
{
    DialogService.OnOpen += Open;
    DialogService.OnClose += Close; 
    
    DialogService.Open("", ds =>
                        @<div>
                            <div class="row">
                                <div class="col-md-12">
                                    Please wait...
                                </div>
                            </div>
                        </div>, new DialogOptions() { ShowTitle = false, Style = "min-height:auto;min-width:auto;width:auto" });


    await CallWeather();
    DialogService.Close();
}

I have tried using async and none async open, and in the OnAfterRender and on initialised. Regardless how i do this when i navigate to this page the dialog does not appear. in the logs it appears the dialog does open but instantly closes itself. I have placed console logs to ensure the close isn't called instantly and it is not so something else is closing it.

The odd part is most approaches i try, if i hit F5 on the page itself it works as expected. But once i navigate away and back to the page it does not show the dialog again.

This seems to be something triggering the dialog to close outside my control but i can't see what or how to get around it.

2

Shortly after posting this issue, i had a thought, is the issue related to the additional renders queued up in the pipeline triggering some built in Radzen clean up code that closes open dialogs?

To test this i changed my code to the following to simulate an action after render has completed and it has "solved" the issue.

This workaround isn't great though, and i'm sure it has created issues i have yet to see.

 protected override async Task OnInitializedAsync()
{
    DialogService.OnOpen += Open;
    DialogService.OnClose += Close;

    await InvokeAsync(async () => {
        await Task.Delay(200);
        DialogService.Open("", ds =>
                            @<div>
                                <div class="row">
                                <div class="col-md-12">
                                    Please wait...
                                </div>
                            </div>
                        </div>, new DialogOptions() { ShowTitle = false, Style = "min-height:auto;min-width:auto;width:auto" });
        });

    await CallWeather();
    await InvokeAsync(async () => { await Task.Delay(200); DialogService.Close(); });
}
3

There is no such cleanup code however the issue is indeed related to how Blazor buffers rendering. Nothing updates immediately in the browser until all code finishes. What happens in the first code snippet is that you call DialogService.Open but it doesn't open the dialog immediately as there is more stuff to happen in the method. Then you call DialogService.Close which closes the dialog. As a result nothing is shown. Using InvokeAsync is the only way to implement what you need and is the sole purpose the InvokeAsync method exists. It is also what we are using on our online demo.