I am somewhat new to Razor pages and come from a background with Angular and am aware for long loading async pages I can use route animates or skeleton loaders. I have skeleton loaders on a Razor page but my issue more comes from when that page is loaded it is making an expensive API call so I would like to show a progress bar because right now from say the home page you hit the route in the nav bar and then nothing happens for a solid 5 seconds until the page loads and the skeleton loader is shown ever so briefly. I am using memoryCache so next time it’s not as bad but regardless been trying to google how to handle this better. Can someone point me in the right direct?

so, you can see here the yellow click is when I hit it and then finally at the end the content loads but during that whole time the home screen is still shown and that’s the main issue I would like to solve

I have even tried this but it still results in a very long pause before the page loads with the progress bar

    @if (loading == true)
{
    <div class="progress mt-3">
        <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
    </div>
} else{
...content here...
}

@code {
    public Boolean loading = true;
protected override async Task OnInitializedAsync()
{
....
loading = false;
}