Customizing the Blazor WebAssembly loading screen

  • Gérald Barré

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 stay 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:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Meziantou - Loading</title>
    <base href="/" />
</head>
<body>
    <!-- 👇 Here -->
    <app>Loading...</app>

    <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 😉

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

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!

Do you have a question or a suggestion about this post? Contact me!

Follow me:
Enjoy this blog?Buy Me A Coffee