Extract loading state from observable

loading$.ts

import {
  Observable,
  ObservableInput,
  ReplaySubject,
  delay,
  distinctUntilChanged,
  finalize,
  from,
  of,
  tap,
} from 'rxjs';

export function extractLoading<T>(
  source: ObservableInput<T>,
): [Observable<boolean>, Observable<T>] {
  const loading$ = new ReplaySubject<boolean>();
  const tracked$ = new Observable<T>((subscriber) => {
    loading$.next(true);
    const subscription = from(source)
      .pipe(
        tap(() => loading$.next(false)),
        finalize(() => loading$.next(false)),
      )
      .subscribe(subscriber);
    return () => {
      loading$.next(false);
      loading$.complete();
      subscription.unsubscribe();
    };
  });
  return [loading$.pipe(distinctUntilChanged()), tracked$];
}

 
const [loading, source] = extractLoading(fetch('https://jsonplaceholder.typicode.com/posts/1').then(
  (response) => response.json(),
));

// OR with lazy calling

const [loading, source] = extractLoading(defer(() => fetch('https://jsonplaceholder.typicode.com/posts/1').then(
  (response) => response.json(),
)));

source.subscribe({
  next: (value) => {
    console.log({ source: value });
  },
});
loading.subscribe({
  next: (value) => {
    console.log({ loading: value });
  },
});