Updated confirm dialog to support async requests with loading spinner

src/app/dialogs/confirm-dialog/confirm-dialog.component.html

@@ -1,12 +1,15 @@
 <h4 mat-dialog-title>{{dialogTitle}}</h4>
 <mat-dialog-content>
-  <div>
+  <div style="margin-bottom: 10px;">
     {{dialogText}}
   </div>
 </mat-dialog-content>
 <mat-dialog-actions>
   <!-- The mat-dialog-close directive optionally accepts a value as a result for the dialog. -->
-  <button color="primary" mat-flat-button type="submit" [mat-dialog-close]="true">{{submitText}}</button>
+  <button color="primary" mat-flat-button type="submit" (click)="confirmClicked()">{{submitText}}</button>
+  <div class="mat-spinner" *ngIf="submitClicked">
+    <mat-spinner [diameter]="25"></mat-spinner>
+  </div>
   <span class="spacer"></span>
   <button style="float: right;" mat-stroked-button mat-dialog-close>Cancel</button>
 </mat-dialog-actions>

src/app/dialogs/confirm-dialog/confirm-dialog.component.scss

@@ -1 +1,5 @@
 .spacer {flex: 1 1 auto;}
+
+.mat-spinner {
+    margin-left: 8px;
+}

src/app/dialogs/confirm-dialog/confirm-dialog.component.ts

@@ -1,5 +1,5 @@
-import { Component, OnInit, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { Component, OnInit, Inject, EventEmitter } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-confirm-dialog',
@@ -8,14 +8,34 @@ import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 })
 export class ConfirmDialogComponent implements OnInit {
 
-  dialogTitle: 'Confirm';
-  dialogText: 'Would you like to confirm?';
-  submitText: 'Yes'
+  dialogTitle = 'Confirm';
+  dialogText = 'Would you like to confirm?';
+  submitText = 'Yes'
+  submitClicked = false;
 
-  constructor(@Inject(MAT_DIALOG_DATA) public data: any) {
+  doneEmitter: EventEmitter<any> = null;
+  onlyEmitOnDone = false;
+  
+
+  constructor(@Inject(MAT_DIALOG_DATA) public data: any, public dialogRef: MatDialogRef<ConfirmDialogComponent>) {
     if (this.data.dialogTitle) { this.dialogTitle = this.data.dialogTitle };
     if (this.data.dialogText) { this.dialogText = this.data.dialogText };
     if (this.data.submitText) { this.submitText = this.data.submitText };
+
+    // checks if emitter exists, if so don't autoclose as it should be handled by caller
+    if (this.data.doneEmitter) {
+      this.doneEmitter = this.data.doneEmitter;
+      this.onlyEmitOnDone = true;
+    }
+  }
+
+  confirmClicked() {
+    if (this.onlyEmitOnDone) {
+      this.doneEmitter.emit(true);
+      this.submitClicked = true;
+    } else {
+      this.dialogRef.close(true);
+    }
   }
 
   ngOnInit(): void {