DEV Community

Cover image for Show loading indicator for Lazy Modules in Angular
Ahmed Murtaza
Ahmed Murtaza

Posted on

2 1

Show loading indicator for Lazy Modules in Angular

In Angular, By default, all modules are loaded as soon as the applications load, irrespective of which modules are immediately necessary and which are not.

Why Lazy-loaded Modules

In the case of applications with many routes, these modules would eventually increase initial load time and consequently bad user experience. To prevent large load time we prefer lazy-loaded modules to minimize initial load time as well as bundle size. Every module is of different sizes as well as the network conditions, which will take different times to load. For a better user experience, showing loader would definitely be a good idea!

Loader code

app.component.html

<router-outlet>
  <span class="loader" *ngIf="isLoading"></span>
</router-outlet>
Enter fullscreen mode Exit fullscreen mode

app.component.css

.loader {
  display: inline-block;
  width: 40px;
  height: 40px;
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: 50%;
  transform: translateY(-50%);
}

.loader:after {
  content: " ";
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 5px solid #000;
  border-color: #000 transparent #000 transparent;
  animation: loader 1.2s linear infinite;
}

@keyframes loader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Enter fullscreen mode Exit fullscreen mode

app.component.ts

import { Component } from '@angular/core';
import { Router, RouteConfigLoadStart, RouteConfigLoadEnd, RouterEvent } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  isLoading: boolean = false

  constructor(router: Router) {

    router.events.subscribe(
      (event: RouterEvent): void => {
        if (event instanceof RouteConfigLoadStart) {
          this.isLoading = true;
        } else if (event instanceof RouteConfigLoadEnd) {
          this.isLoading  = false;
        }
      }
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

The actual source code is here. The Loader part is
<span class="loader" *ngIf="isLoading"></span> which has a condition to show and hide based on isLoading boolean. The last part is app.component.ts where we have added the following code block:

router.events.subscribe(
      (event: RouterEvent): void => {
        if (event instanceof RouteConfigLoadStart) {
          this.isLoading = true;
        } else if (event instanceof RouteConfigLoadEnd) {
          this.isLoading  = false;
        }
      }
    );
Enter fullscreen mode Exit fullscreen mode

Here we are subscribed to router events and switching isLoading based on RouteConfigLoadStart and RouteConfigLoadStart.

Hope this would be useful, see you guys soon 👋.

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free