javascript - evitar que el usuario haga clic en el botón hasta que el servicio responda angular 7 rxjs

Estoy buscando una solución eficiente para evitar que el usuario haga clic en el botón de enviar una y otra vez hasta que obtenga respuesta del API del backend.

He pensado en la siguiente solución, pero estoy buscando otras formas de manejar esto.

1. usa un cargador que deshabilitará todo el html hasta que obtengamos alguna respuesta.

2. usa exhaustmap para evitar múltiples llamadas HTTP

3. use throttletime que no permitirá manualmente al usuario hacer clic durante un período de tiempo específico.

Por favor, guíenme si hay alguna otra solución que podamos usar.

Respuesta #1

Recomendaría usar exhaustMap() como solución principal en este caso. En la plantilla:

<button (click)="submitForm()">Submit</button>

entonces en tu componente:

submit$: Subject<boolean> = new Subject();

constructor() {
  this.submit$.pipe(
    exhaustMap(() => this.http.get("api/endpoint"))
  ).subscribe(res => {});
}

submitForm() {
  this.submit$.next(true);
}

Haces clic en 'Enviar' y todos los eventos de clic posteriores serán ignorados por el operador exhaustMap() hasta que la instancia de HttpClient devuelva la respuesta y se complete.

Respuesta #2

Puedes desactivar el propio botón hasta que obtengas una respuesta teniendo una bandera en el archivo del controlador de tu componente.

// en el controlador del componente

loading = false;
.
...
submit(): void {
  loading = true;
  this.someserive.getData().pipe(finalize(() => this.loading = false).subcribe(...
  .
  ....
}

// en la plantilla del componente

<button [disabled]="loading" (click)="submit()">Submit</button>