A splash screen is something which renders before the rest of an application is ready, and blocks the rest of the UI.
It avoids a user having to sit staring at a semi-functional product, and having the UI judder as more content is loaded.
OK I know what a splash screen is, how do I do one in Angular!?!
Add an element that you want to be your ‘splash’ to your index.html. Below we add a div and then an image inside it
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>World's angriest cats</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="assets/styles/splash.css" />
</head>
<body class="mat-typography">
<app-root></app-root>
<div class="splash">
<img
class="splash__image"
src="my-angry-cat.jpg"
alt="Angry cat splash page"
/>
</div>
</body>
</html>
And add some CSS similar to this to make sure it fills the whole screen and bleeds in/out etc.
.splash {
opacity: 1;
visibility: visible;
transition: opacity 1.4s ease-in-out, visibility 1.4s;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: red;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
// This little piece of trickery hides the splash image once the app-root is populated (i.e. the app is ready)
app-root:not(:empty) + .splash {
opacity: 0;
visibility: hidden;
}
.splash__image {
width: 100%;
max-width: 200px;
}
OK cool, but what if I want to wait for a specific API call to finish (e.g. CMS) before rendering my site?
No worries. Angular has you covered here too 🙂
Assuming that you have a provider called ContentProvider, which is doing some asynchronous task to get content for your site, and then exposes a stream to tell you when the data is ready, you can tell Angular that it needs to wait until this is done using the slightly confusingly named APP_INITIALIZER injection token.
This, as far as my puny brain can approximate, adds the function returned from your useFactory method to an array of methods which are called before the app initialises and starts rendering.
If the function you return returns a promise, as below, then the app will not initialise until that promise resolves.
{
provide: APP_INITIALIZER,
useFactory: (content: ContentProvider) => {
return async () => {
return new Promise(resolve => {
content.loadContent();
content.loaded.subscribe(loaded => {
if (loaded) {
resolve();
}
});
});
};
},
multi: true,
deps: [ContentProvider],
},