[RxJS] Building an RxJS Operator

While we’ve made sure to expose our spinner service using simple, external APIs, most of the time, it will be called in the same way, from observables and promises. In this lesson, we will be creating an RxJS operator that be easily plugged in to different observables to track them via the spinner.

 

function showLoadingStatus() {
  return source => new Observable((subscriber) => {
    newTaskStarted(); // start your logic
    const sub = source.subscribe(subscriber);

    return () => {
      sub.unsubscribe();
      existingTaskCompleted();  // end your logic
    }
  });
}

interval(500)
  .pipe(
    take(2),
    showLoadingStatus()
  )
  .subscribe(
    (x) => console.log('next is ', x)
  )