Set only single loader while hitting multiple http requests continuously using ngx-ui-loader in angular

I have implemented this ngx-ui-loader and set the NgxUiLoaderHttpModule for every HTTP request hits and it is working fine. But the issue is on some routes of my project, there are continuously multiple HTTP requests executed, and the loader start for every requests and stops after the response and then again starts for next request which looks awful. So is there any way to show only single loader for all continuous HTTP requests?

Thanks in advance!

I have tried various method but it didn't work.

The solution proposed by @sfelli is easy but you may face issue if multiple requests end in the same time.
this.ngxService.stop() may be called mutiple times or never called
The solution I found to overcome this issue is to use RxJs NEVER observable.
Hereafter is a refactoring of the interceptor :

import { Injectable } from '@angular/core';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { NgxUiLoaderService } from 'ngx-ui-loader';
import { catchError, finalize } from 'rxjs/operators';

@Injectable()
export class NgxHttpInterceptor implements HttpInterceptor {

  constructor(private readonly ngxService: NgxUiLoaderService) { }

  private readonly spinner$ = defer(() => {
    this.ngxService.start();
    return NEVER.pipe(
      finalize(() => {
        this.ngxService.stop();
      })
    );
  }).pipe(share());

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const spinnerSubscription: Subscription = this.spinner$.subscribe();
    return next.handle(req).pipe(finalize(() => spinnerSubscription.unsubscribe()));
  }
}

I made an article decribing more deeply this solution : Show loader during HTTP request handeling concurrency

The easy way to do it:

Step 1- Create a custom HttpInterceptor class:

import { Injectable } from '@angular/core';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { NgxUiLoaderService } from 'ngx-ui-loader';
import { catchError, finalize } from 'rxjs/operators';

@Injectable()
export class NgxHttpInterceptor implements HttpInterceptor {

  private count = 0;

  constructor(private ngxService: NgxUiLoaderService) { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    this.ngxService.start();
    this.count++;
    return next.handle(req).pipe(
      catchError(error => {
        return of(error);
      }),
      finalize(() => {
        this.count--;
        if (this.count === 0) {
          this.ngxService.stop();
        }
      })
    );
  }
}

Step 2 Register the CustomHttpInterceptor class in your AppModule:

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { CustomHttpInterceptor } from './custom-http-interceptor';

@NgModule({
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: CustomHttpInterceptor, multi: true }
  ]
})
export class AppModule { }

You will have only a single loader displayed during all continuous HTTP requests. The loader will start once before the first request and stop after the last response.