In my current feature, users have the ability to create new data and save it. If the data already exists, a modal will pop up as shown in the image below:
However, there is an issue when the user clicks the save button multiple times while the request is still pending. This triggers the "Data already exists wanna proceed on saving?" popup to appear again, which is not desired.
As depicted in the screenshot below, if the request is still pending and the user clicks the button again, the popup will appear once more. How can we resolve this using Angular? Any helpful ideas or suggestions would be greatly appreciated. Thank you.
Save data snippet
listenToSaveEvent(): void {
this.saveSubject
.asObservable()
.pipe(
filter((v) => !!v),
debounceTime(1e3)
)
.subscribe(() => {
if (this.respondents.length === 1) {
return this.checkExistingData();
CODE THAT CHECKS EXISTING DATA
checkExistingData(): void {
const test = this.formService.checkExisting(this.form)
.subscribe(res => {
if (res ) {
const createExistingSub = this.confirmDialogService.open(
ERROR_MESSAGES."Data already exists wanna proceed on saving?"
)
.componentInstance
.confirmed
.subscribe((confirmed) => {
if (confirmed) {
return this.createDATA();
}
createExistingSub.unsubscribe();
});
} else {
return this.createDATA();
}
});