A rxjs operators that every web apps can use, but is not built-in

collect-response.ts

import { Observable, SubscribableOrPromise } from "rxjs"
import { switchMap, tap } from "rxjs/operators"

export type collectedResponse<T2> = { loading: boolean; error: null | Error; value: null | T2 }

export function collectResponse<T1, T2>(performRequest: (t1: T1) => SubscribableOrPromise<T2>) {
    return (observer: Observable<T1>)=>{
        let lastResponse = null as null | T2
        return new Observable<collectedResponse<T2>>(subscriber=>{
            return observer.pipe(
                tap(()=>{
                    subscriber.next({
                        loading: true,
                        error: null,
                        value: lastResponse,
                    })
                }),
                switchMap(performRequest)
            ).subscribe(res=>{
                lastResponse = res
                subscriber.next({
                    loading: false,
                    error: null,
                    value: res,
                })
            }, error=>{
                subscriber.error({
                    loading: false,
                    error,
                    value: lastResponse,
                })
            })
        })
    }
}