How to show a loader in Angular + Ionic app
A little background. I’m working on a project where we develop a hybrid mobile app and web SPA using Angular & Ionic. One day we got a request to show a loader while the app is loading instead of blank screen. And since this took several iterations to make it work perfectly I decided to write this article to help you get to the end solution faster.
How it’s done in Angular world
When you develop an Angular application it’s a common approach when you write a loader inside app-root and when the app loads it replaces the loader with the app’s content.
How it worked for us
We can see the loader while the app initialized, some configs fetched etc. However, then loader disappears and the blank screen is presented to the user for a few seconds, then the page appears.
Exploring the Network tab showed that it’s because framework’s scripts were loaded and the app, was initialized. It rendered the outlet on the page and thus removed the loader. However, it just started loading a lazy route and hence while it’s loading there is nothing to show.
Waiting for navigation to finish
In pure Angular app we can rely on Router event NavigationEnd which is called when a route was fully loaded, all resolvers finished and page is rendered.
To do so we would modify our index.html page
<body>
<app-root></app-root>
<div id="app-loader">...</div>
</body>and subscribe to the router events
this.router.events
.pipe(
filter(e => e instanceof NavigationEnd),
take(1)
)
.subscribe(() => document.querySelector('#app-loader').remove())And this would work for most applications.
But not for us. Apparently, even when such event is fired, Ionic is still doing something under the hood and the page is not rendered yet. And hence there is still that nasty blank screen between the loader and the actual page being rendered. Depending on how huge the route is and how slow internet connection is it might last for a few secs.
Using undocumented Ionic event to hide the loader
After reading Ionic docs for a while I found that there is not so much info about the Ionic’s router. Thankfully, an IDE of mine can list all the inputs and outputs of an Angular component. That’s where I discovered such event as (activate) .
It gets fired when the page was activated (i.e. presented to the user) Ionic’s specific lazy loading/bootstrapping included.
Then all I had left was to attach a method to the event and remove the loader once it’s fired.
// app.component.html<ion-router-outlet (activate)="hideLoader()"></ion-router-outlet>// app.component.tspublic hideLoader(): void {
document.querySelector('#app-loader')?.remove()
}
Note the optional chaining operator here. If we don’t add it or don’t add a check for whether the loader was removed we would encounter error as the event would fire on each page transition.
Also, a great thing here is the order of HTML elements. Given the specifics of how CSS works we only need to make the loader positioned (usually fixed) and it’s always atop of the app-component and no need to be scared of some artifacts rendered on top of the loader in case it’s not hidden timely or being used as transition between app’s states.
