Angular-Interceptor: как управлять несколькими загрузчиками / счетчиками на странице

У нас есть приложение Angular6, где у нас есть разные компоненты на странице, и у каждого компонента есть <loader isLoading = {loading} /> для отображения загрузчика при вызове API. Но этот процесс выполняется вручную, для этого каждый компонент должен поддерживать флаг загрузки.

Я хочу, чтобы перехватчик справился с этим. Я написал код, но он работает частично правильно.

Поведение приложения

В моей реализации он продолжает показывать загрузчик до тех пор, пока не завершится каждый вызов API. (Ведение подсчета вызовов API)

Итак, как мне показать только те загрузчики, для которых вызов API еще не завершен, и скрыть те, для которых API завершен.

Реализация перехватчика

export class HttpCommonInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        this.loader.start();
        this.loaderCount++;
        return next.handle(req).pipe(
            tap(event => {
                if (event instanceof HttpResponse) {
                    this.loaderCount--;
                    if (this.loaderCount === 0) {
                        this.loader.stop();
                    }
                    return of(event);
                }
            }),
            catchError(error => {
                this.loader.stop();
                this.loaderCount--;
                console.info('Error caught in interceptor ', error);
                return of(error);
            })
        );
    }
}