RxJS operator that keeps a running counter of the number of active requests

monitor-active-requests.ts

import { defer, Observable, ObservableInput } from 'rxjs';
import { finalize } from 'rxjs/operators';

/**
  * This is an RxJS operator that keeps a running counter of the number of active requests.
  * This can be used to show a spinner for the first of a series of requests, and hide the spinner
  * once all requests in the series are complete.
  * 
  * For example:
  *   const activeRequestMonitor: ActiveRequestMonitor = monitorActiveRequests({
  *     singleStartFn: () => this.showSpinner(),
  *     allCompleteFn: () => this.hideSpinner()
  *   });
  *   ...
  *   this.http.post(url1, body1).pipe(
  *     activeRequestMonitor
  *   ).subscribe(() => { ... })
  *   ...
  *   this.http.post(url2, body2).pipe(
  *     activeRequestMonitor
  *   ).subscribe(() => { ... })
  *   
  */

export const monitorActiveRequests = (config: ActiveRequestMonitorConfig): ActiveRequestMonitor => {
  let numActiveRequests = 0;
  return (source: Observable<any>) => {
    return defer(() => {
      numActiveRequests++;
      if (config.singleStartFn) {
        config.singleStartFn();
      }
      return source.pipe(
        finalize(() => {
          numActiveRequests--;
          if (numActiveRequests === 0) {
            if (config.allCompleteFn) {
              config.allCompleteFn();
            }
          }
        })
      );
    });
  };
};

export interface ActiveRequestMonitorConfig {
  singleStartFn: Function;
  allCompleteFn: Function;
}

export type ActiveRequestMonitor = (Observable: any) => Observable<any>;