Spinner - Application

app.component.ts

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { Angulartics2Piwik } from 'angulartics2/piwik';$
import { LoaderService } from '@services/loader.service';
import * as fromRoot from '@core/reducers';
import { Store } from '@ngrx/store';
import * as fromGlobal from '@actions/global.action';

import { Subscription } from 'rxjs';
import { OnDestroy } from '@angular/core';

export abstract class SubscribableBase implements OnDestroy {
  protected _subscription = new Subscription();
  public ngOnDestroy() {
    this._subscription.unsubscribe();
  }
}



@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent extends SubscribableBase implements OnInit, AfterViewInit {
  public isShowSpinner = false;
  timer = null;
  constructor(
    public store: Store<fromRoot.AppState>
  ) {
    super();
  }

  ngOnInit() {
  }

  ngAfterViewInit() {
      // Here I use a timer, to wait for 1s, if there is no more request to the server
      // I will hide the spinner
      // This action is a key to avoid the spinner flash following the requests in a stack
    this._subscription.add(
      this.store.select(fromRoot.getSpinnerCounter).subscribe(spinnerCounter => {
        clearTimeout(this.timer);
        this.timer = setTimeout(() => {
          this.isShowSpinner = spinnerCounter !== 0;
        }, spinnerCounter !== 0 ? 0 : 1000); 
      })
    );
  }
}