Posted: 03/04/2021

Customising The Blazor Loading Page

I sent this tweet out the other day :

I just noticed that my #Blazor WASM Blog is only a 1.1MB download on #dotnet 5. Wow, how did they get it that small!
— Mark Oliver 💙 (@MicbOliver) April 3, 2021

And Adam suggested I needed a loading animation:

Getting a animated loading animation would help with knowing it's actually working on downloading the app..👍
— Adam (@scawdk) April 3, 2021

He is right, I do!

So off to google, I go, and found this helpful page by Gerald Barre

Using this as a guide, I changed my index.html to have this in the "app" div:

            
              <div id="app">         <div style="position:absolute; top:30vh; width:100%; text-align:center">             <h1>Mark Oliver's World</h1>             <p><i class="fas fa-spin fa-spinner"></i> The application is loading...</p>         </div>     </div>

Note, its slightly different to the article, but not much (outer div is not an app tag).

Now, the page looks nice, but as Adam noticed when I published it, the animation was not working (That will teach me to deploy in the middle of a game with my son!).
It turns out, that the animation itself if part of Font Awesome pack (which is awesome), but is not loaded by default in the Blazor template.
So I could just add it, but thats a lot of overhead for a swirly icon.
I have bootstrap and Open iconic currently installed, can they do anything?
Open Iconic - No, they are static icons.
Bootstrap - This has something, so lets use it:

            
              <div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">     <span class="sr-only">Loading...</span>     </div>

This works nicely. Thanks everyone!

Thanks for reading this post.

If you want to reach out, catch me on Twitter!

Tweet to @MicbOliver

I am always open to mentoring people, so get in touch.