[RxJS] Encapsulate complex imperative logic in a simple observable

Two very important features of the Observable primitive is that they can be activated by subscribing to them and disposed off when we are not interested in them anymore. All good observables need to clean up after themselves when they are disposed off. We took advantage of this when we wrote the observable that switches to showing the loader when the count is positive, and stops listening to it when the count is zero. In this lesson, we will learn how to encapsulate all the complex imperative logic for showing and hiding the spinner, inside a simple observable that can be plugged into any stream.

 

  shouldShowSpinner.pipe(
    switchMap(() => showSpinner.pipe(takeUntil(shouldHideSpinner)))
  )

 

Inside Observable constructor, you can put some side effect code. For example, when 'showSpinner' get triggered, we will show the spinner.

When the 'showSpinner' observable complete, it will call the unsubscribe function we return to hide spinner.

const showSpinner = new Observable(() => {
  const loadingSpinnerPromise = initLoadingSpinner();

  loadingSpinnerPromise.then(spinner => {
    spinner.show()
  })

  return () => {
    loadingSpinnerPromise.then(spinner => {
      spinner.hide();
    })
  }
});