Use progress bar for button delay

src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.ts

@@ -1,6 +1,6 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { Subject } from 'rxjs'
+import { interval, Subject, switchMap, take } from 'rxjs'
 
 @Component({
   selector: 'app-confirm-dialog',
@@ -33,19 +33,28 @@ export class ConfirmDialogComponent {
 
   confirmButtonEnabled = true
   seconds = 0
+  secondsTotal = 0
 
   confirmSubject: Subject<boolean>
 
   delayConfirm(seconds: number) {
-    this.confirmButtonEnabled = false
+    const refreshInterval = 0.15 // s
+
+    this.secondsTotal = seconds
     this.seconds = seconds
-    setTimeout(() => {
-      if (this.seconds <= 1) {
-        this.confirmButtonEnabled = true
-      } else {
-        this.delayConfirm(seconds - 1)
-      }
-    }, 1000)
+
+    interval(refreshInterval * 1000)
+      .pipe(
+        take(this.secondsTotal / refreshInterval + 2) // need 2 more for animation to complete after 0
+      )
+      .subscribe((count) => {
+        this.seconds = Math.max(
+          0,
+          this.secondsTotal - refreshInterval * (count + 1)
+        )
+        this.confirmButtonEnabled =
+          this.secondsTotal - refreshInterval * count < 0
+      })
   }
 
   cancel() {