How to Implement a Loading Screen During Route Transitions in Angular?

Displaying a Loading Screen During Route Transitions in Angular 2

Angular Router offers Navigation Events that enable you to monitor changes and modify the UI accordingly. These events include NavigationStart, NavigationEnd, NavigationCancel, and NavigationError.

Using Navigation Events

To display a loading screen during route changes, you can subscribe to these Navigation Events within your root component (typically app.component.ts) and toggle the loading UI based on the specific event triggered.

First, import the necessary event related classes from the @angular/router and define a boolean flag, loading, within your root component.

import {
  Router,
  Event as RouterEvent,
  NavigationStart,
  NavigationEnd,
  NavigationCancel,
  NavigationError
} from '@angular/router'

@Component({})
export class AppComponent {
  loading = true; // Initializing to true to show loading spinner on first load
  constructor(private router: Router) {
    this.router.events.subscribe((e : RouterEvent) => {
       this.navigationInterceptor(e);
     })
  }
}

Within the navigationInterceptor method, you can listen for the NavigationStart, NavigationEnd, NavigationCancel, and NavigationError events and toggle the loading flag based on each event.

  // Shows and hides the loading spinner during RouterEvent changes
  navigationInterceptor(event: RouterEvent): void {
    if (event instanceof NavigationStart) {
      this.loading = true;
    }
    if (event instanceof NavigationEnd) {
      this.loading = false;
    }
    if (event instanceof NavigationCancel) {
      this.loading = false;
    }
    if (event instanceof NavigationError) {
      this.loading = false;
    }
  }

Within your root template, you can then use conditional rendering to display the loading overlay based on the loading flag's state.

<div>
<p>By following this approach, you can effectively display a loading screen during route transitions in your Angular 2 application.</p>
<h3 id="Performance-Optimization">Performance Optimization</h3>
<p>If performance is a concern, you can leverage NgZone and Renderer to enhance the loading spinner's performance, as shown in the updated code snippet below:</p>
<pre class="brush:php;toolbar:false">private _navigationInterceptor(event: RouterEvent): void {
    if (event instanceof NavigationStart) {
      this.ngZone.runOutsideAngular(() => {
        this.renderer.setElementStyle(
          this.spinnerElement.nativeElement,
          'opacity',
          '1'
        )
      })
    }
    if (event instanceof NavigationEnd) {
      this._hideSpinner()
    }
    // Set loading state to false in both of the below events to
    // hide the spinner in case a request fails
    if (event instanceof NavigationCancel) {
      this._hideSpinner()
    }
    if (event instanceof NavigationError) {
      this._hideSpinner()
    }
  }

  private _hideSpinner(): void {
    this.ngZone.runOutsideAngular(() => {
      this.renderer.setElementStyle(
        this.spinnerElement.nativeElement,
        'opacity',
        '0'
      )
    })
  }

This technique bypasses Angular's change detection mechanism when updating the spinner's opacity, resulting in smoother transitions.