Loading spinner app.component

app.component.html

<!-- Loading spinner -->
<div *ngIf="loading" class="loading-container flex-content-center">
  <mat-progress-spinner
    color="primary"
    mode="indeterminate">
  </mat-progress-spinner>
</div>

<!-- the application -->
<div class="site-container">
  <div class="site-header">
    <app-header></app-header>
  </div>
  <div class="site-content">
    <router-outlet></router-outlet>
  </div>
</div>

app.component.scss

@import 'variables';

.loading-container {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.7);
  z-index: 5;
}

.site-container {
  font-size: 14px;
  font-family: Roboto, "Helvetica Neue", sans-serif;
  height: 100vh;
  background: #f1f1f1;
  overflow: hidden;

  .site-header {
    height: 64px;
  }

  .site-content {
    height: calc(100vh - 65px);
    padding: 0 15px;
    overflow: auto;
  }
}

app.component.ts

import {Component, OnInit} from '@angular/core';
import {delay} from 'rxjs/operators';
import {LoadingService} from './layout/services/loading/loading.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'angular-boilerplate';
  loading: boolean = false;

  constructor(
    private _loading: LoadingService
  ){ }

  ngOnInit() {
    this.listenToLoading();
  }

  /**
   * Listen to the loadingSub property in the LoadingService class. This drives the
   * display of the loading spinner.
   */
  listenToLoading(): void {
    this._loading.loadingSub
      .pipe(delay(0)) // This prevents a ExpressionChangedAfterItHasBeenCheckedError for subsequent requests
      .subscribe((loading) => {
        this.loading = loading;
      });
  }

}

Hi @keithstric so I read your blog on medium and I have a few misunderstandings:

1. Your example only use one spinner, what if I want to tie N spinner with K requests ? (one per request) (one the same component)
   How to tie a spinner to a specific request?
2. the interceptor catch all requests but only a subsets of the requests that an application make should trigger a spinner so it's a performance downgrade
3. What about multiple components interactions/conflicts ? If a component A get a route then an unrelated distant component B get the same route, will it restart the component A spinner ? if so this is an intolerable action at a distance bug that totally prevent your solution to be production ready.

Essentially the only elegant solution that I know would be https://github.com/posva/vue-promised but I haven't found similar solution on the Angular world. Do all production ready Angular apps are cluttered by checking isLoading booleans ?

I think that I'm looking for something like https://github.com/MZanggl/promistate but compatible with observables.
How do you think I compare versus your solution ?