Detect when authorization has finished

Question

I'm using animated full page loader to obstruct view until client app has finished loading. Without authorization it was enough to call IJSRuntime in App.razor that would slide the overlay out to show fully loaded content.

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    await JSRuntime.InvokeVoidAsync($"hidePageLoader");
    await base.OnAfterRenderAsync(firstRender);
}

However authorization kicks in after the App's OnAfterRenderAsync event, so it will slide the overlay away while there is still for a brief moment "Authorizing..." content, then it swaps for actual content. So in simple terms I'm looking for something like OnAfterAuthorization (made that up) to be called in one place and work for both Authorized and NotAuthorized outcomes of any razor component page.

Answer 1

Just await the Task<AuthenticationState> cascaded parameter passed down by <CascadingAuthenticationState> component. I've done this from within default layout's OnAfterRenderAsync.

MainLayout.razor

@code {
    [CascadingParameter]
    private Task<AuthenticationState> AuthenticationStateTask { get; set; }
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await AuthenticationStateTask;
        await JSRuntime.InvokeVoidAsync($"hidePageLoader");
        await base.OnAfterRenderAsync(firstRender);
    }
}