Show Loader/Spinner On HTTP Request In Angular using Interceptor

Angular Interceptors can be used in a number of ways as they work pretty well in manipulating and managing HTTP calls to communicate that we make from a client-side web application. If you are aware of the middleware concept, you can visualize them as a middleware function/s, executed every time an Http call is made.

Sometimes we want to inform the users that there are some server request going on by showing Loaders/ Spinners or Progress bars.

In this post we will create an utility for showing Mouse Loader using Interceptor.

Let’s start. I will assume that you have a basic to intermediate knowledge on Angular Interceptor, Components and Services.

LoaderService

First create a LoaderService which is having boolean observable that will be changed by the interceptor on every HTTP request.

import { Injectable } from '@angular/core';
import { Observable, ReplaySubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class LoaderService {
  private httpLoading$ = new ReplaySubject<boolean>(1);
  constructor() { }

  httpProgress(): Observable<boolean> {
    return this.httpLoading$.asObservable();
  }

  setHttpProgressStatus(inprogess: boolean) {
    this.httpLoading$.next(inprogess);
  }
}

LoaderInterceptor

Then create a LoaderInterceptorwhich will handle every HTTP request and make loader visible on response.

Don’t forget to put entry of LoaderInterceptor in AppModule.

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { LoaderService } from '@app/services';
import { Observable } from 'rxjs';
import { finalize } from 'rxjs/operators';

@Injectable()
export class LoaderInterceptor implements HttpInterceptor {

  private count = 0;

  constructor(private loaderService: LoaderService) { }
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (this.count === 0) {
      this.loaderService.setHttpProgressStatus(true);
    }
    this.count++;
    return next.handle(req).pipe(
      finalize(() => {
        this.count--;
        if (this.count === 0) {
          this.loaderService.setHttpProgressStatus(false);
        }
      }));
  }
}

AppComponent

Now initiate the loader in ngAfterViewInit of AppComponent by adding class dynamic using Renderer2 .

import { AfterViewInit, Component, Renderer2 } from '@angular/core';
import { LoaderService } from './services';
@Component({
  selector: 'qto-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements AfterViewInit {

  constructor(private loaderService: LoaderService, private renderer: Renderer2) { }

  ngAfterViewInit() {
    this.loaderService.httpProgress().subscribe((status: boolean) => {
      if (status) {
        this.renderer.addClass(document.body, 'cursor-loader');
      } else {
        this.renderer.removeClass(document.body, 'cursor-loader');
      }
    });
  }
}

Styles

At last but not least add the class cursor-loader in your styles.scss

.cursor-loader {
  cursor: wait;
  * {
    cursor: wait !important;
  }
}

Wrapping It All Up

This gives a nice touch to every Angular app. Feel free to use and distribute the code. That’s all folks. Thanks!

ENJOY YOUR CODING!