cc-loading Observable extension

[rogue-elephant]

this would allow observable to easily show the loading indicator like this:

...
import "../../node_modules/chapichapi/ngx-loading/observable.extensions";
...

ngOnInit() {
    this.coursesService
      .findLessons(this.course.id)
      .showLoading(this.loadingService)
      .subscribe((lessons) => (this.lessons = lessons));
  }

The code for the extension should be something like this (was playing around with this in another project earlier):

import { Observable } from "rxjs";
import { tap, delay, finalize } from "rxjs/operators";

declare module "rxjs" {
  interface Observable<T> {
    /** Sets the loading property to true or false based on when the observable is started and completed. */
    showLoading<T>(
      this: Observable<T>,
      service: LoadingService,
      loadDelay?: number
    ): Observable<T>;
  }
}

function showLoading<T>(
  this: Observable<T>,
  service: LoadingService,
  loadDelay = 300
) {
  return this.pipe(
    tap(() => (service.show())),
    delay(loadDelay),
    finalize(() => {
      service.hide();
    })
  );
}
Observable.prototype.showLoading = showLoading;