display export indicator

Author: vladimiry

src/web/src/app/_db-view/db-view-mail-tab.component.html

@@ -15,18 +15,33 @@
             </ul>
         </ng-template>
         <div class="py-2 d-flex">
-            <a class="d-flex flex-grow-1" href="javascript:void(0)" (click)="export()">Export</a>
+            <a class="d-flex flex-grow-1" href="javascript:void(0)"
+               *ngIf="!exporting; else progressTemplate"
+               (click)="export()"
+            >Export</a>
+            <ng-template #progressTemplate>
+                <div class="text-primary d-flex flex-grow-1" style="cursor: not-allowed">
+                    Export
+                    <small><i class="fa fa-spinner fa-pulse fa-fw ml-1"></i></small>
+                </div>
+            </ng-template>
             <i class="fa fa-info-circle text-danger d-flex pt-1 ml-1"
                [popover]="dangerPopupTemplate" placement="top" container="body" triggers="mouseenter:mouseleave"
             ></i>
             <i class="fa fa-info-circle text-warning d-flex pt-1 ml-1"
                [popover]="warningPopupTemplate" placement="top" container="body" triggers="mouseenter:mouseleave"
             ></i>
             <ng-template #dangerPopupTemplate>
-                App exports emails in their original <br>form, <span class="text-danger">unencrypted</span> and <span class="text-danger">unsanitized</span>!
+                <div class="text-center">
+                    App exports emails<br>in their original form,<br>
+                    <span class="text-danger">unencrypted</span> and <span class="text-danger">unsanitized</span>!
+                </div>
             </ng-template>
             <ng-template #warningPopupTemplate>
-                Attachments are ignored during export.
+                <div class="text-center">
+                    Attachments are ignored<br>
+                    during export.
+                </div>
             </ng-template>
         </div>
     </div>

src/web/src/app/_db-view/db-view-mail-tab.component.ts

@@ -1,7 +1,7 @@
-import {ChangeDetectionStrategy, Component, Input, OnDestroy} from "@angular/core";
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy} from "@angular/core";
 import {EMPTY, Subject} from "rxjs";
 import {Store, select} from "@ngrx/store";
-import {concatMap, mergeMap, takeUntil} from "rxjs/operators";
+import {concatMap, filter, finalize, mergeMap, takeUntil, throttleTime} from "rxjs/operators";
 
 import {CORE_ACTIONS, DB_VIEW_ACTIONS} from "src/web/src/app/store/actions";
 import {DbAccountPk, MAIL_FOLDER_TYPE, Mail, View} from "src/shared/model/database";
@@ -19,6 +19,8 @@ import {ToggleFolderMetadataPropEmitter} from "./db-view-mails.component";
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DbViewMailTabComponent extends NgChangesObservableComponent implements OnDestroy {
+    exporting?: boolean;
+
     @Input()
     dbAccountPk!: DbAccountPk;
 
@@ -65,6 +67,7 @@ export class DbViewMailTabComponent extends NgChangesObservableComponent impleme
     constructor(
         private store: Store<State>,
         private api: ElectronService,
+        private changeDetectorRef: ChangeDetectorRef,
     ) {
         super();
     }
@@ -87,9 +90,23 @@ export class DbViewMailTabComponent extends NgChangesObservableComponent impleme
 
     export() {
         this.api.ipcMainClient({timeoutMs: ONE_SECOND_MS * 60 * 5})("dbExport")(this.dbAccountPk)
-            .pipe(takeUntil(this.unSubscribe$))
+            .pipe(
+                takeUntil(this.unSubscribe$),
+                filter((value) => "progress" in value),
+                throttleTime(ONE_SECOND_MS / 2),
+                finalize(() => {
+                    delete this.exporting;
+                    this.changeDetectorRef.detectChanges();
+                }),
+            )
             .subscribe(
-                () => {},
+                () => {
+                    if (this.exporting) {
+                        return;
+                    }
+                    this.exporting = true;
+                    this.changeDetectorRef.detectChanges();
+                },
                 (error) => this.store.dispatch(CORE_ACTIONS.Fail(error)),
             );
     }