Правильно ли сделан индикатор загрузки?

У меня есть приложение, каждая страница которого состоит из нескольких компонентов. после некоторого события происходит большой асинхронный запрос на сервер и в это время желательно выводить значок загрузки. Я эту задачу решил, но проблема в том, что в моём способе происходит 3 запроса в секунду. Это наводит меня на мысль о, том, что моё решение неудачное.

у меня есть глобальный сервис:

private globalVars: Object = {};

  getVar(key) {
    return this.globalVars[key];
  }
  setVar(key, value): void {
    this.globalVars[key] = value;
  }
  getLoading(): Observable<any> {
    return Observable.timer(0, 300).map(() => {
      return this.globalVars['isLoading'];
    });
  }

В корневом шаблоне есть разметка значка загрузки:

<div class="loading" *ngIf="isLoading">Loading...</div>

Вот стили для неё:

.loading{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #fff;
  opacity: 0.5;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

Таким образом в компоненте, который делает асинхронный запрос я применяю следующую тактику:

this.globalVarsService.setVar('isLoading', true);
--- ajax request ---
this.globalVarsService.setVar('isLoading', false);

Скажите пожалуйста, можно ли в getLoading() сервиса избавиться от трёх запросов в течение одной секунды? Или, возможно, это нормальная практика?