How to implement a global loader in Angular

by

Here is what I ended up with, after realizing that a delay was a good solution in terms of UX because it allowed the loader to show only when the loading time is worth displaying a loader.

I don’t like this solution because I prefer when the state is being encapsulated into Observable operators rather than in a shared variable but I couldn’t achieve it.

counter = 0;

router.events.pipe(
  filter(x => x instanceof NavigationStart),
  delay(200),
).subscribe(() => {
  /*
  If this condition is true, then the event corresponding to the end of this NavigationStart
  has not passed yet so we show the loader
  */
  if (this.counter === 0) {
    loaderService.show();
  }
  this.counter++;
});

router.events.pipe(
  filter(x => x instanceof NavigationEnd || x instanceof NavigationCancel || x instanceof NavigationError)
).subscribe(() => {
  this.counter--;
  loaderService.hide();
});

More Related Contents:

  1. Angular 7 go offline?
  2. Hot and Cold observables: are there ‘hot’ and ‘cold’ operators?
  3. How to get current value of RxJS Subject or Observable?
  4. BehaviorSubject vs Observable?
  5. Angular 4 Interceptor retry requests after token refresh
  6. How can I close a dropdown on click outside?
  7. Subject vs BehaviorSubject vs ReplaySubject in Angular
  8. How to do the chain sequence in rxjs
  9. Angular 2 – Chaining http requests
  10. Rxjs toPromise() deprecated
  11. How to achieve a debounce service on input keyup event in angular2 with rxjs
  12. How to cancel a subscription in Angular2
  13. What is the difference between Observable and a Subject in rxjs?
  14. How to ‘wait’ for two observables in RxJS
  15. What is the difference between BehaviorSubject and Observable?
  16. Upgrading to Angular 10 – Fix CommonJS or AMD dependencies can cause optimization bailouts
  17. Property ‘catch’ does not exist on type ‘Observable’
  18. Dynamic template URLs in Angular 2
  19. Angular2 Dynamic input field lose focus when input changes
  20. How to Consume Http Component efficiently in a service in angular 2 beta?
  21. Angular 2.1.0 create child component on the fly, dynamically
  22. What is ngDefaultControl in Angular?
  23. RxJS Promise Composition (passing data)
  24. Unraveling Angular 2 book, Chapter 1, Example 5
  25. What are use cases for mergeMap operator?
  26. Cast int to enum strings in Typescript
  27. Module not found: Error: Can’t resolve ‘fs’ in
  28. How to Export JSON to CSV or Excel – Angular 2
  29. How to import socket.io-client in a angular 2 application?
  30. Observable Finally on Subscribe

Leave a Comment