Show a Loading Indicator for Lazy Routes in Angular
As shown in a previous lesson, we can easily code split and lazy load a route in Angular. However when the user then clicks that lazy loaded route, it make some time to actually fetch and run the JavaScript bundle. In this lesson we'll see how we can implement a loading indicator for such lazy loaded routes.
Instructor: [00:00] This application here improves the time to interactive by applying some code-splitting mechanism, as you can see here. Only when we click here that button...In fact, let's prove that. Initially, we get these files here.
[00:13] When the button is clicked, additional JavaScript file gets loaded in, just for visualizing the specific route. Now, obviously, once we transition from one page to another, that downloading of that file -- obviously, depending on our network connection and also on the size of that file -- may take a while.
[00:30] What we want to do here is to visualize here a loading indicator. First of all, let's go to that app component, which has that router outlet, which basically visualizes here our components. Inside here, we paste in such a span with a loader class that gets visualized when that loading flag is set to true.
[00:50] Don't worry about that loader here. There's a bunch of CSS behind to visualize the animation. We're not quite interested into that, but rather, how to visualize that, how to show that and hide that. As we said, this happens with this loading flag. First of all, we needed to define that. This is a Boolean. Then in the constructor here, we need to initialize that.
[01:12] First of all, let's say this is equals to false, because we are not loading at all. We'll also save here our app component HTML. Now, we need to understand when the loading should start and when it finishes.
[01:26] That happens, basically, in our case, with the router transition. Whenever we click, a routing transition happens, and then it terminates itself at some point. Here, we can use that router, and we can obviously fetch that via the dependence injection from that Angular router package.
[01:42] That router now expose different kind of events. We can, first of all, subscribe to those events. Here, we have an event, which is a router event. Basically, if that event is an instance of that route config load start event, which we need to import, of course, then we want that loading animation to start and to visualize.
[02:03] Also, if that event is an instance that route config load end event, we want to hide it again. All right, so now, let's save this. Let's see where this works. Actually, you can see it very briefly. Let me here refresh and then throttle the connection a bit. If I click, you can see that loading, and then the new page gets visualized.