Use progress bar for button delay

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 a55c0b00a3de8b87ebccacbbb247bd129c954d5c..19d907c82a43f0a64454c0440e6d240d541b7d41 100644 (file)
--- 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 10d32db436513588b7d023ca7ee88d8adc7b79ed..ddf0bfd7ca861ffb0db24f373e27b6d31dc82b59 100644 (file)
--- 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() {