I am facing an issue with displaying a spinner while waiting for my API to complete. When I click the onSave button, the spinner appears as expected. However, even after the API call is completed, the spinner remains visible. How can I make sure the spinner closes after the API call is finished?
public onSave() {
this.isSaving = true
this.formService.entityForm.markAsPristine();
this.visaSubmitHandler.execute({ application: this.formService.entityForm.value }).subscribe({
next: (response: IApplicationCreateResponse) => {
this.stateRehydrationService.clearStateKey(this.formService.key);
this.visaSuccessHandler.execute({ application: response.entity });
},
error: (response: IApplicationCreateResponse) => {
this.formService.entityForm.markAsDirty();
try {
for (const error of response.errors) {
const propertyName = `${error.propertyName[0].toLowerCase()}${error.propertyName.slice(1)}`
const control = this.formService.entityForm.get(propertyName) as AbstractControl;
setErrors({ serverError: error.message }, control);
}
this.bottomSheet.open(DisplayErrorsComponent, { data: response.errors.map(e => e.message) });
} catch (e) {
console.error(e);
}
},
complete: () => {
this.isSaving = false
}
})
}
<div class="overlay" *ngIf="isSaving">
<div class="spinner-container">
<mat-spinner></mat-spinner>
</div>
</div>