Blazor is an experimental Web UI framework from Microsoft. There are plenty of posts about so I'm not going to describe it and I'm directly heading to my topic.
When you create an empty Blazor application from template and run it, it simply shows "Loading..." while downloading whole the application to the browser. As it could be a (very) few megabytes, so it can be shown for a little while.
It doesn't look great and it can be very easily fixed/enhanced. This "Loading..." text comes from
index.html in your project. The pre-generated one looks like this:
<meta charset="utf-8" />
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/site.css" rel="stylesheet" />
As you can see, the text is placed in
<app> tags. This element is replaced once Blazor is bootstrapped. Anything you place between these tags will be shown between first page load and Blazor bootstrap finish.
In our Money - experimental outcome manager - we have replaced the default text with this one.
Once bootstrap is finished and an application is loaded, it smoothly transitions to full layout.
The source code (taken from github) looks like this:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container body-content">
<p>© 2018 - Money</p>
It is a simplified copy of Blazor main layout from _layout.cshtml and also server side _layout.cshtml.
A side note on replacing <app> tag
This tag is not replaced magically. The replacement is defined in
Program.cs in method
Main at the last line from template.
public class Program
static void Main(string args)
var serviceProvider = new BrowserServiceProvider(configure =>
That's it. It's this simple to create more eye-catchy booting screens.