Почему не отображается спиннер?

Question

[zlodiak]

Есть приложение, в котором после загрузки app.component отправляется http-запрос. Интерцептор перехватывает любые запросы таким образом, что перед запросом состояние отображения спиннера true, после завершения запроса состояние отображения спиннера false. Состояние спиннера хранится в сервисе в виде BehaviourSubject.

Проблема в том, что спиннер не отображается вообще, хотя я намеренно добавил запросу задержку через delay. Помогите пожалуйста понять как отображать пиннер во время работы http-запроса.

DEMO

Вот код интерцептора:

@Injectable()
export class MyInterceptor implements HttpInterceptor {
  constructor(private globalService: GlobalService) {}

  intercept(
    request: HttpRequest<unknown>,
    next: HttpHandler
  ): Observable<HttpEvent<unknown>> {
    request = request.clone({
      setHeaders: { Authorization: `Bearer 123` }
    });

    this.globalService.setSpinnerState(true);

    return next
      .handle(request)
      .pipe(finalize(() => this.globalService.setSpinnerState(false)));
  }
}

Код сервиса отправки запроса:

@Injectable({
  providedIn: "root"
})
export class ApiService {
  constructor(private http: HttpClient) {}

  getData() {
    console.log("start request");
    return this.http
      .get("https://jsonplaceholder.typicode.com/todos/1")
      .pipe(delay(2000))
      .subscribe((res: any) => {
        console.log(res);
        console.log("end request");
      });
  }
}

Код сервиса спиннера:

@Injectable({
  providedIn: "root"
})
export class GlobalService {
  private isShowSpinner = new BehaviorSubject(false);

  constructor() {}

  spinner() {
    return this.isShowSpinner.asObservable();
  }

  setSpinnerState(state: boolean) {
    return this.isShowSpinner.next(state);
  }
}

Код компонента:

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  isShowSpinner: boolean;
  constructor(
    private apiService: ApiService,
    private globalService: GlobalService
  ) {
    this.apiService.getData();
    this.globalService.spinner().subscribe((state: boolean) => {
      this.isShowSpinner = state;
    });
  }
}