Blazor stop main layout rendering when not authenticated

How do I go about displaying a spinner on the whole page rather than having the contents of the MainLayout rendering when the page is protected by an [authorised] attribute?

At the moment I get the Authorising text next to the nav menu for 3 seconds, then the app redirects for authenication.

enter image description here

Adding the following to the imports.razor file breaks the entire flow. It fails to auth and shows a white screen

imports.razor file:

@using Microsoft.AspNetCore.Authorization
@attribute [Authorize]

MainLayout.cs

@inherits LayoutComponentBase

<div class="page">
<div class="sidebar">
    <NavMenu />
</div>

<main>
    <div class="top-row px-4 auth">
        <LoginDisplay />
        <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
    </div>

    <article class="content px-4">
        @Body
    </article>
</main>

homepage

@page "/"
@using Microsoft.AspNetCore.Authorization
@attribute [Authorize]
<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

<div class="alert alert-warning" role="alert">
  test
 details in <code>Program.cs</code>
 </div>

 Welcome to your new app.

 <SurveyPrompt Title="How is Blazor working for you?" />

Solution 1:

Check out your App.razor. Is it using the AuthorizeRouteView component?

This is what it should look like.

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(App).Assembly" PreferExactMatches="@true">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                <Authorizing><h3>Trying to authorize you.</h3></Authorizing>
                <NotAuthorized><h3>Sorry mate, you can't go here!</h3></NotAuthorized>
            </AuthorizeRouteView>
            <FocusOnNavigate RouteData="@routeData" Selector="h1" />
        </Found>
        <NotFound>
            <PageTitle>Not found</PageTitle>
            <LayoutView Layout="@typeof(MainLayout)">
                <p>Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>