Service Loading

LoadingService

Servizio singleton (providedIn: 'root') che gestisce lo stato di caricamento globale tramite un contatore interno. Più operazioni concorrenti possono richiedere lo spinner indipendentemente — lo spinner scompare solo quando tutte le operazioni sono completate.

---

API

Metodo / Proprietà	Tipo	Descrizione
show()	void	Incrementa il contatore (mostra lo spinner)
hide()	void	Decrementa il contatore (nasconde lo spinner se arriva a 0)
isLoading	Signal<boolean>	true quando il contatore è > 0

Il contatore non scende mai sotto 0.

---

Utilizzo manuale

readonly loading = inject(LoadingService);

async carica() {
  this.loading.show();
  try {
    this.dati = await firstValueFrom(this.service.getDati());
  } finally {
    this.loading.hide();  // garantito anche in caso di errore
  }
}

---

isLoading nel template

readonly loading = inject(LoadingService);

<!-- Disabilita un bottone durante il caricamento -->
<button mat-flat-button [disabled]="loading.isLoading()" (click)="salva()">
  Salva
</button>

<!-- Mostra un indicatore inline -->
@if (loading.isLoading()) {
  <mat-progress-bar mode="indeterminate" />
}

---

Integrazione automatica con HTTP

Aggiungere loadingInterceptor per gestire automaticamente lo stato di caricamento su tutte le chiamate HTTP:

// app.config.ts
provideHttpClient(
  withInterceptors([contextInterceptor, loadingInterceptor])
)

Con l'interceptor attivo, ogni chiamata HTTP chiama automaticamente show() all'inizio e hide() al completamento.

---

Vedi anche

• → Loading Overlay — componente visuale spinner
• → Interceptors — loadingInterceptor e contextInterceptor