Angular spinner async on http request

Question

I have mi in place an http request spinner that appears if a request is in progress. Except that I get the following error :

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'false'. Current value: 'true'.

<div class="container-fluid">
  <div class="row col-md-12">
    <div class="spinner-style" *ngIf="isLoading | async">
      <mat-spinner spinner-delay="2000"></mat-spinner>
    </div>

    <app-another-comp-table[isLoading]="isLoading | async">
.....
    </app-another-comp-table>
  </div>
</div>

My method init in my component :

ngOnInit(){
    this.isLoading = this.loaderService.getIsLoading$();

...
}

My Loader service :

export class LoaderService {
  public isLoading = new BehaviorSubject(false);

  constructor() { }

  getIsLoading$(): Observable<boolean> {
    return this.isLoading.asObservable();
  }
  
}

Answer 1

You get this error because isLoading changes from false to true. When you declare isLoading, his default value will be false. The DOM did not have time to process the false value, and it changes to true when your observable end.

RxJS is strictly sequential and subscriptions happen synchronously.

A solution can be to wrap your variable with setTimeout() or with NgZone.run().

You can also do this with rxjs using subscribeOn(async) operator.

import { asyncScheduler } from 'rxjs';
import { observeOn } from 'rxjs/operators';
...
getIsLoading$(): Observable<boolean> {
  return this.isLoading.asObservable()
  .pipe(observeOn(asyncScheduler);
}

PS : You should end the name of an observable with $ (isLoading$)