When a Blazor WebAssembly application loads, it first downloads blazor.webassembly.js and all the .NET assemblies of the application. Until everything is loaded, it displays an ugly loading message:
This message can be visible for a few seconds depending on the size of the application and the connection speed of the client. So, you should better change it to something that matches your application design. Hopefully, this is pretty simple. Indeed, the message is defined in the file wwwroot/index.html:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Meziantou - Loading</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="BlazorApp1.styles.css" rel="stylesheet" />
</head>
<body>
<!-- 👇 Here -->
<div id="app">Loading...</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
</body>
</html>
This means you can change the loading message with something more beautiful as long as it fits in the app element. Blazor will delete everything in this element once it starts the application. Here's an example much more beautiful loading screen. I think you'll notice I'm a developer, not a designer 😉
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Meziantou - Loading</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="BlazorApp1.styles.css" rel="stylesheet" />
</head>
<body>
<div id="app">
<div style="position:absolute; top:30vh; width:100%; text-align:center">
<h1>My application</h1>
<div style="display:flex; gap:10px; justify-content:center; align-items:center">
<div class="spinner-border" role="status"></div>
The application is loading...
</div>
</div>
</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
</body>
</html>
Once the Blazor application is loaded, you may need some initialization before the user can use it. In this case, you may still want to show the loading screen while the application is initializing. We'll see in the next post how to show a loading screen while initializing a Blazor application. Stay tuned!
#Additional resources
Do you have a question or a suggestion about this post? Contact me!
