ExpressionChangedAfterItHasBeenCheckedError spinner

Question

Я новичок в Angular Я пытаюсь сделать перехватчик для запросов http,

, но только у меня ошибка ExpressionChangedAfterItHasBeenCheckedError.

Эта ошибка появляется когда я открываю модальное окно для создания чего-либо, и этот компонент делает запрос http.

Отладчик помечает ошибку внутри компонента счетчика

<ng-container *ngIf="loading$ | async">
<mat-progress-bar mode="indeterminate"></mat-progress-bar>

Ошибка может быть разрешается путем написания delay(0), но я не думаю, что это хорошо

  export class SpinnerComponent implements OnInit {
  loading$;

  constructor(private spinnerService: SpinnerService) { }

  ngOnInit() {
    this.loading$ = this.spinnerService.isLoading$
    .pipe(
     delay(0)
    );
  }

}

=====

Spinner Interceptor

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
import { SpinnerService } from './spinner.service';
import { finalize } from 'rxjs/operators';

@Injectable()
export class SpinnerInterceptor implements HttpInterceptor {
    requestCount = 0;
    constructor(private spinnerService: SpinnerService) { }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        this.requestCount++;
        this.spinnerService.show();
        return next.handle(request)
            .pipe(
                finalize(() => {
                    this.requestCount--;
                    if (this.requestCount === 0) {
                        this.spinnerService.hide();
                    }
                })
            );
    }
}

=====

Обслуживание прядильщика

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
    providedIn: 'root'
})
export class SpinnerService {
    isLoading$ = new Subject<boolean>();

    show() {
        this.isLoading$.next(true);
    }
    hide() {
        this.isLoading$.next(false);
    }
}

=====

Компонент прядильщика

import { Component, OnInit } from '@angular/core';
import { SpinnerService } from '../services/spinner.service';
import { Subject } from 'rxjs';

@Component({
  selector: 'app-spinner',
  templateUrl: './spinner.component.html',
  styleUrls: ['./spinner.component.scss']
})
export class SpinnerComponent implements OnInit {

  loading$: Subject<boolean> = this.spinnerService.isLoading$;
  constructor(private spinnerService: SpinnerService) { }

ngOnInit() {}

}

Я абсолютно не могу понять, как ее решить, и из-за чего она появляется

Здесь вы можете увидеть gif задачи