Как правильно организовать индикатор загрузки?

Question

[zlodiak]

У меня есть приложение, каждая страница которого состоит из нескольких компонентов. после некоторого события происходит большой асинхронный запрос на сервер и в это время желательно выводить значок загрузки. Я эту задачу решил, но проблема в том, что в моём способе происходит 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() сервиса избавиться от трёх запросов в течение одной секунды? Или, возможно, это нормальная практика?