Blazor index.html should mimic the top level site

Rather than

<div id="app">Loading...</div>

the index.html should have

<div id="app">
    <div class="page" b-vehgu10x1i>
        <div class="sidebar" b-vehgu10x1i>
            <div class="top-row pl-4 navbar navbar-dark" b-sjoxlt10a7></div>
        </div>
        <div class="main" b-vehgu10x1i>
            <div class="top-row px-4" b-vehgu10x1i></div>
            <div class="content px-4" b-vehgu10x1i>Loading...</div>
        </div>
    </div>
</div>

I was going to make a change to the template; however with the scoped css https://github.com/dotnet/aspnetcore/pull/24380 it additionally needs the specific attribute for the css to work (e.g. b-vehgu10x1i and b-sjoxlt10a7 above); which I’m not sure how to do.

This change means while the page is loading assets rather than starting as

It instead starts at

Which is both less bleak and a less jarring transition to

It also makes the experience perceptively seem to load faster

/cc @javiercn @SteveSandersonMS @mkArtakMSFT

[khalidabuhakmeh]

May I suggest a spinner instead of ...? https://getbootstrap.com/docs/4.4/components/spinners/

<div id="app">
    <div class="page" b-vehgu10x1i>
        <div class="sidebar" b-vehgu10x1i>
            <div class="top-row pl-4 navbar navbar-dark" b-sjoxlt10a7></div>
        </div>
        <div class="main" b-vehgu10x1i>
            <div class="top-row px-4" b-vehgu10x1i></div>
            <div class="content px-4" b-vehgu10x1i>
                <div class="spinner-border text-primary" role="status">
                    <span class="sr-only">Loading...</span>
                </div>
            </div>
        </div>
    </div>
</div>

[TanayParikh]

Thanks all for the input, I’m going to close this out in favor of https://github.com/dotnet/aspnetcore/issues/37199 which covers the Blazor WASM initial loading story.