Adding a splash screen

When a Vaadin application is loading a loading indicator is automatically shown so the user knows something is happening. But what if we want to show something else, like a custom splash screen for our product? Or just customize the loading indicator? Let’s have a look.

During the Vaadin bootstrap there are a couple of div elements added to the page which we can use for our custom splash screen. The DOM for a servlet application looks the like the following when starting up:

HTML

  1. <body scroll="auto" class="v-generated-body">
  2.   <div id="splash-895866265" class="v-app splash">
  3.     <div class="v-app-loading"></div>
  4.     <noscript>
  5.     You have to enable javascript in your browser to use an application built with Vaadin.
  6.     </noscript>
  7.   </div>

In this example splash is the name of our theme. The v-app-loading div is meant for styling the loading screen. It will only exist in the DOM until the widget set has been loaded and the application starts. At that point the v-app-loading div is removed and replaced by the actual components for the application.

Styling the loading screen is then as simple as adding some rules for v-app-loading, for example:

SCSS

  1. .v-generated-body &.v-app .v-app-loading {
  2.   height: 100%;
  3.   width: 100%;
  4.   background-image: url(http://archive.eclipse.org/eclipse/downloads/drops/R-3.3-200706251500/whatsnew/images/splash.png);
  5.   background-repeat: no-repeat;
  6.   background-position: 50%;
  7. }

This will use an Eclipse logo as your splash screen - change the background image to your own splash screen or redesign the css completely to your liking.

Note that Vaadin 7.0 incorrectly does not add the theme name during bootstrap. You must therefore use a rule without the theme name, e.g. .v-generated-body .v-app .v-app-loading and move it out of the @mixin. You also need to ensure the v-app div has a height using .v-app {height:100%;}