From 3dee012415e647882d66581875e497e0f7c7fcb2 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Wed, 16 Mar 2022 13:17:08 -0700
Subject: [PATCH] Use progress bar for button delay

---
 .../confirm-dialog.component.html             |  7 +++--
 .../confirm-dialog.component.ts               | 27 ++++++++++++-------
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.html b/src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.html
index a55c0b00a..19d907c82 100644
--- a/src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.html
+++ b/src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.html
@@ -8,9 +8,12 @@
       <p *ngIf="message">{{message}}</p>
     </div>
     <div class="modal-footer">
-      <button type="button" class="btn btn-outline-secondary" (click)="cancel()" [disabled]="!buttonsEnabled" i18n>Cancel</button>
+      <button type="button" class="btn btn-outline-secondary" (click)="cancel()" [disabled]="!buttonsEnabled" i18n>
+        <span class="d-inline-block" style="padding-bottom: 1px;" >Cancel</span>
+      </button>
       <button type="button" class="btn" [class]="btnClass" (click)="confirm()" [disabled]="!confirmButtonEnabled || !buttonsEnabled">
         {{btnCaption}}
-        <span *ngIf="!confirmButtonEnabled"> ({{seconds}})</span>
+        <ngb-progressbar *ngIf="!confirmButtonEnabled" style="height: 1px;" type="dark" [max]="secondsTotal" [value]="seconds"></ngb-progressbar>
+        <span class="visually-hidden">{{ seconds | number: '1.0-0' }} seconds</span>
       </button>
     </div>
diff --git a/src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.ts b/src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.ts
index 10d32db43..ddf0bfd7c 100644
--- a/src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.ts
+++ b/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() {