Angular rxjs debounce to limit user from sending multiple requests

Question

Basically my issue is that when the connection is slow the user was able to press the save button multiple times and multiple data are being save. This issue does not occur locally but on staging it does.

Although I already have set this.hasBeenSubmitted = true; when the request is done and [disabled] on the button based on the condition user was still able to click the button multiple times and could save multiple times which is wrong.

Some say that Angular rxjs debounce can be solution to this, can someone enlighten me regarding this one? Thank you. And how would it help my issue based on the code below. Thanks.

Code

save(): void {
    const create = this.requestFormService.createRequestData(this.form, this.respondents)
      .subscribe(
        (results: FeedbackRequest[]) => {
          this.hasBeenSubmitted = true;
        },
        (error) => {
          this.hasBeenSubmitted = false;
          this.handleInvalidFields(error, 'Failed to save the Feedback Request as draft. One or more fields contain invalid values. Input a valid value to proceed.');
          this.messageDialogService.show('Failed to save the Feedback Request as draft. One or more fields contain invalid values. Input a valid value to proceed.', true);
          create.unsubscribe();
        }
      );
  }

html

 <button [disabled]="form.invalid || (!duplicateMode && !form.dirty) || (!editMode) || hasBeenSubmitted"
        mat-raised-button *ngIf="form" (click)="save()" type="submit">
        <ng-container>
          <span>SAVE</span>
        </ng-container>
      </button>

Answer 1

If I understand correctly you want to restrict the user to hit save multiple times, and you said you already have the disabled condition applied.

Could you try to rewrite your save button like the following.

save(): void {
    this.hasBeenSubmitted = true;
    const create = this.requestFormService.createRequestData(this.form, this.respondents)
      .pipe(
       take(1), 
       finalized(this.hasBeenSubmitted = false),
       ),
       catchError((err) =>{
          this.hasBeenSubmitted = false;
          this.handleInvalidFields(error, 'Failed to save the Feedback Request as 
          draft. One or more fields contain invalid values. Input a valid value to proceed.');
          this.messageDialogService.show('Failed to save the Feedback Request as 
          draft. One or more fields contain invalid values. Input a valid value to proceed.', true);
         create.unsubscribe();
      })
      .subscribe(
        (results: FeedbackRequest[]) => {

        }
      );
  }

The major thing I change is executing this.hasBeenSubmitted = true; before create call.

I hope it helps.