Loading global durante requisições HTTP no Angular

Implemente um loading global no Angular usando interceptor, finalize e um serviço compartilhado sem repetir código nos componentes.

Serviço de loading

@Injectable({ providedIn: 'root' })
export class LoadingService {
  private contador = 0;
  private loadingSubject = new BehaviorSubject(false);

  loading$ = this.loadingSubject.asObservable();

  iniciar(): void {
    this.contador++;
    this.loadingSubject.next(true);
  }

  finalizar(): void {
    this.contador = Math.max(0, this.contador - 1);
    this.loadingSubject.next(this.contador > 0);
  }
}

Interceptor

intercept(
  req: HttpRequest<unknown>,
  next: HttpHandler
): Observable<HttpEvent<unknown>> {
  this.loading.iniciar();

  return next.handle(req).pipe(
    finalize(() => this.loading.finalizar())
  );
}

Por que usar contador?

Se duas requisições estiverem acontecendo ao mesmo tempo, esconder o loading quando a primeira terminar seria incorreto. O contador mantém o indicador ativo até que todas finalizem.

Evite piscar em requisições muito rápidas

Em aplicações mais refinadas, você pode aplicar um pequeno atraso antes de exibir o indicador para evitar “piscar” em chamadas de poucos milissegundos.