ngx-smart-loading

State loading tracking

Source https://github.com/KSergey-web/ngx-smart-loading

Compatibility with Angular Versions

ngx-smart-loading	Angular
1.x	>= 13.3.1

Table of contents

• Setup
• Wrap some request
• Manually changing the download status
• Own observable for tracking download status
• Multiple instances of the service

Setup

npm i ngx-smart-loading

Wrap some request

You can wrap some Observable to find out the status of its execution. The execution status can be obtained from the ngxSmartLoadingService.isLoading$.

import { NgxSmartLoadingService } from "ngx-smart-loading";
import { HttpClient } from "@angular/common/http";

@Component()
export class SomeComponent {
  constructor(
    private http: HttpClient,
    private ngxSmartLoadingService: NgxSmartLoadingService,
  ) {
    this.ngxSmartLoadingService.wrapObservable(this.http.get("SOME_URL")).subscribe();
  }

  isLoading$ = this.ngxSmartLoadingService.isLoading$;
}

Value in ngxSmartLoadingService.isLoading$ will become true when subscription to observable occurs and then will become false when observable complete.

Manually changing the download status

You can change status of loading by call startLoading and stopLoading.

import { NgxSmartLoadingService } from "ngx-smart-loading";
import { HttpClient } from "@angular/common/http";

@Component()
export class SomeComponent {
  constructor(
    private http: HttpClient,
    private ngxSmartLoadingService: NgxSmartLoadingService,
  ) {
    this.ngxSmartLoadingService.startLoading();
    this.ngxSmartLoadingService.wrapObservable(http.get("SOME_URL")).subscribe(() => {
      this.ngxSmartLoadingService.stopLoading();
    });
  }

  isLoading$ = this.ngxSmartLoadingService.isLoading$;
}

It is important that the number of stopLoading calls is the same as startLoading . Otherwise, it will mean that some of the requests have not completed yet and isLoading$ will be true.

Own observable for tracking download status

You can create your own BehaviorSubjects that monitor the download status and register them in the service to get a final value that will tell you whether there is at least some download going on or not.

import { NgxSmartLoadingService } from "ngx-smart-loading";
import { HttpClient } from "@angular/common/http";
import { BehaviorSubject } from "rxjs";

@Component()
export class SomeComponent {
  loader1 = new BehaviorSubject(true);

  constructor(
    private http: HttpClient,
    private ngxSmartLoadingService: NgxSmartLoadingService,
  ) {
    //registering a loader1
    this.ngxSmartLoadingService.addLoaderForMultiplexing(this.loader1);
    const loader2 = new BehaviorSubject(false);
    ////registering a loader2
    this.ngxSmartLoadingService.addLoaderForMultiplexing(loader2);
    loader2.next(true);
    this.ngxSmartLoadingService.wrapObservable(this.http.get("SOME_URL")).subscribe(() => {
      loader2.next(false); // now isLoading$ still true because loader1 is currently set to true
      this.loader1.next(false); // now isLoading$ is false
    });
  }

  isLoading$ = this.ngxSmartLoadingService.isLoading$;
}

Multiple instances of the service

In the case where you need to display two independent spinners on a page, you can encapsulate the visibility of the service at the component level where the spinner should be shown. In the following example, SomeComponent1 and SomeComponent2 will have their own NgxSmartLoadingService instances and changing the state of one service does not change the state of the other in any way

import { NgxSmartLoadingService } from "ngx-smart-loading";

@Component({
  providers: [NgxSmartLoadingService],
})
export class SomeComponent1 {
  constructor(private ngxSmartLoadingService: NgxSmartLoadingService) {}

  isLoading$ = this.ngxSmartLoadingService.isLoading$;
}

@Component({
  providers: [NgxSmartLoadingService],
})
export class SomeComponent2 {
  constructor(private ngxSmartLoadingService: NgxSmartLoadingService) {}

  isLoading$ = this.ngxSmartLoadingService.isLoading$;
}