From 5ed8a25e5b61084918a290a8b3cf2e9aa752cb67 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sat, 2 Apr 2022 22:20:24 -0700
Subject: [PATCH] disable download buttons while awaiting zip

---
 .../bulk-editor/bulk-editor.component.html          | 13 +++++++++----
 .../bulk-editor/bulk-editor.component.ts            |  3 +++
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
index 0a92cd083..631b558d0 100644
--- a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
+++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
@@ -57,13 +57,18 @@
   </div>
   <div class="col-auto ms-auto mb-2 mb-xl-0 d-flex">
     <div class="btn-group btn-group-sm me-2">
-      <button type="button" class="btn btn-outline-primary btn-sm" (click)="downloadSelected()">
-        <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
+      <button type="button" [disabled]="awaitingDownload" class="btn btn-outline-primary btn-sm" (click)="downloadSelected()">
+        <svg *ngIf="!awaitingDownload" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
           <use xlink:href="assets/bootstrap-icons.svg#download" />
-        </svg>&nbsp;<ng-container i18n>Download</ng-container>
+        </svg>
+        <div *ngIf="awaitingDownload" class="spinner-border spinner-border-sm" role="status">
+          <span class="visually-hidden">Preparing download...</span>
+        </div>
+        &nbsp;
+        <ng-container i18n>Download</ng-container>
       </button>
       <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
-        <button class="btn btn-outline-primary btn-sm dropdown-toggle-split" ngbDropdownToggle></button>
+        <button [disabled]="awaitingDownload" class="btn btn-outline-primary btn-sm dropdown-toggle-split" ngbDropdownToggle></button>
         <div class="dropdown-menu shadow" ngbDropdownMenu>
           <button ngbDropdownItem i18n (click)="downloadSelected('originals')">Download originals</button>
         </div>
diff --git a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts
index 00d6a2273..c451f851e 100644
--- a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts
+++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts
@@ -39,6 +39,7 @@ export class BulkEditorComponent {
   tagSelectionModel = new FilterableDropdownSelectionModel()
   correspondentSelectionModel = new FilterableDropdownSelectionModel()
   documentTypeSelectionModel = new FilterableDropdownSelectionModel()
+  awaitingDownload: boolean
 
   constructor(
     private documentTypeService: DocumentTypeService,
@@ -317,10 +318,12 @@ export class BulkEditorComponent {
   }
 
   downloadSelected(content = 'archive') {
+    this.awaitingDownload = true
     this.documentService
       .bulkDownload(Array.from(this.list.selected), content)
       .subscribe((result: any) => {
         saveAs(result, 'documents.zip')
+        this.awaitingDownload = false
       })
   }
 }