My Angular application does a lot of Http Requests, so I'd like to display a spinner in order to notify the user that the application is working (and it's not "freeze"). So I have implemented the following interceptor:

```
import {HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http';
import {Injectable} from '@angular/core';
import {finalize, timeout} from "rxjs/operators";
import {Observable} from 'rxjs';

@Injectable()
export class LoadingInterceptor implements HttpInterceptor {

  readonly TIMEOUT_VALUE = 10000;
  private requests: number = 0;

  constructor() {
  }

  public intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    this.addRequest(request);
    return next.handle(request)
      .pipe(
        timeout(this.TIMEOUT_VALUE),
        finalize(() => this.removeRequest(request))
      );
  }

  private addRequest(request: HttpRequest<any>) {
    this.requests++;
    if (this.requests === 1)
      this.present();
  }

  private present() {
    // show the spinner
  }

  private removeRequest(request: HttpRequest<any>) {
    this.requests--;
    if (this.requests === 0)
      this.dismiss();
  }

  private dismiss() {
    // dismiss the spinner
  }

}

```

The above code displays a spinner when there is a pending request, and dismiss it when all the requests are completed. However, the requests often return a value in under a second, therefore I'd like to display the spinner only when the requests take more the a second to respond.

My first approach was to have an interval in the constructor which check the number of pending request every second, and display/dismiss the spinner accordingly.

```
constructor() {
  Observable.interval(1000).subscribe(() => {
    if (this.requests === 1)
      this.present();
    if (this.requests === 0)
      this.dismiss();
  });
}

```

but this seems pretty ugly to me. Is there a more elegant way to accomplish this task?