After launching the game a few times, I have already gotten tired of seeing the default “Loading…” message on every startup. Luckily there is a way to build our own application splash screen that will display while the Blazor WebAssembly loads on the page.
Let’s revisit the “./wwwroot/index.html” file. We edited this file earlier to add required css and javascript linked files (lesson 1.5). Now, let’s take a look at the body of this HTML page.
<body>
<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>
<script>navigator.serviceWorker.register('service-worker.js');</script>
<!-- Begin: Blazorise required script files -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="_content/Blazorise/blazorise.js"></script>
<script src="_content/Blazorise.Bootstrap/blazorise.bootstrap.js"></script>
<!-- End: Blazorise required script files -->
</body>
The <app> tag is where the Blazor WebAssembly gets rendered. The “Loading…” content is what renders while the our application is loading. But, we can replace the text there with whatever HTML content we want. So lets create a more dynamic splash screen.
First, let’s create a SplashScreenLogo.png file in the ./wwwroot/images folder. I modified this image from the original spider image on Scott Lilly’s WPF Simple RPG project. Typically, people put large versions of their logo (like the spider) on their app startup screens.
Next, let’s change the Index.html body <app> tag to the following:
<body>
<app>
<div style="margin: 0 auto; width: 100vw; height: 100vh; background-color: #004A00">
<div style="text-align:center; color: white; font-size: 16pt; margin-top: 12px">Loading...</div>
<div style="text-align:center; color: white; margin-top: 12px"><span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="font-size: 16pt; width: 36px; height: 36px;"></span></div>
<div style="height:660px; line-height:660px; text-align:center"><img src="/images/SplashScreenLogo.png" style="vertical-align:middle" /></div>
</div>
</app>
...
</body>
The first div is a container that takes up the full height and width of the browser viewport. And sets a colorful, dark green background color — something a little more interesting than a stark, white background.
The second div brings back the “Loading…” text, but in large, white text.
The next div renders a loader control that continuously spins while the splash screen is being displayed. This gives the user feedback that something is happening in our application. We’re not going to dive deeply into the html loader details, but for those interested read about it here.
The final div contains a horizontally and vertically centered image of our large logo.
That’s all it takes to get the application to render a more compelling splash screen while it loads.
Now, let’s build and debug (Ctrl+F5) our game again. We should see the following splash screen as the game starts…
As we think about splash screens, here are some things to keep in mind:
- It’s easy to create this type of splash screen, so have one for any app or game. Making users look at an empty white screen does not instill confidence in our users.
- The
<app>content can be as complex an html fragment as we would like to make it. - This is a great place to start our application branding and flow it through the entire app/game.
- The screen comes and goes quickly on a local installation, but when users are downloading our app over the web, this will be shown longer.
- Notice the layout here is all HTML and CSS, not using Blazorise components. Blazorise loads with our application and is not available to use at this point in the Blazor application lifecycle.
There we have it! Something more interesting to look at every time we launch and debug our Simple RPG game.
DarthPedro's Blog 