Add loader for download answers action #257 (#261)

* Add loader for download answers action #257 * Feature: answer.component.html download button disabled if data is loading
code4romania · Oct 5, 2020 · ed60490 · ed60490 · vercel · Oct 5, 2020
1 parent 1ac03b6
commit ed60490
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/frontend/src/app/components/answer/answer.component.html b/frontend/src/app/components/answer/answer.component.html
@@ -35,7 +35,12 @@
   <div class="list-header col-md-12">
     <h3>{{((answerState | async)?.urgent ? 'URGENT_HEADER' : 'NOT_URGENT_HEADER') | translate}}</h3>
     <h5>{{((answerState | async)?.urgent ? 'URGENT_SUBHEADER' : 'NOT_URGENT_SUBHEADER') | translate}}</h5>
-    <button (click)="downloadAnswers()" class="btn btn-default mb-2">{{'DOWNLOAD_ANSWERS' | translate }}</button>
+    <button (click)="downloadAnswers()" class="btn btn-default mb-2" [disabled]="isLoading">
+      <ng-container *ngIf="isLoading">
+        <i class="fa fa-circle-o-notch fa-spin" style="font-size:14px"></i>
+      </ng-container >
+      {{'DOWNLOAD_ANSWERS' | translate }}
+    </button>
   </div>
   <div class="col-md-3">
     <app-answer-list [answerState]="answerState | async" (reload)="redoAnswerListAction()"

diff --git a/frontend/src/app/components/answer/answer.component.ts b/frontend/src/app/components/answer/answer.component.ts
@@ -27,6 +27,7 @@ export class AnswerComponent implements OnInit {
     isUrgent: boolean;
     fromTime: string;
     toTime: string;
+    isLoading: boolean;
 
     constructor(private store: Store<AppState>,
                 private answersService: AnswersService,
@@ -115,8 +116,12 @@ export class AnswerComponent implements OnInit {
             filter.to = this.toTime;
         }
 
+        this.isLoading = true;
         return this.answersService.downloadAnswers(filter).subscribe(res => {
+          this.isLoading = false;
             FileSaver.saveAs(res, 'answsers.xlsx');
+        }, error => {
+          this.isLoading = false;
         });
     }