From 95948573df8e6c778073cf5714e5a10647e2c749 Mon Sep 17 00:00:00 2001
From: garrettmills <shout@garrettmills.dev>
Date: Thu, 4 Feb 2021 16:22:16 -0600
Subject: [PATCH] #83 - add loading mask to file box

---
 .../nodes/file-box/file-box.component.html       | 16 +++++++++-------
 .../nodes/file-box/file-box.component.ts         |  7 +++++--
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/app/components/nodes/file-box/file-box.component.html b/src/app/components/nodes/file-box/file-box.component.html
index f67c24d..1e16d12 100644
--- a/src/app/components/nodes/file-box/file-box.component.html
+++ b/src/app/components/nodes/file-box/file-box.component.html
@@ -10,7 +10,7 @@
                 (click)="navigateBack(rec)"
             >{{ rec.name }}&nbsp;&nbsp;/</button>
             <ion-input
-                [readonly]="readonly"
+                [readonly]="readonly || isLoading"
                 [(ngModel)]="fileBoxName"
                 (change)="onRecordNameChange($event)"
                 style="flex: 1; font-size: 15pt;"
@@ -23,9 +23,9 @@
             ><i class="fa fa-times"></i></button>
         </div>
         <ion-buttons *ngIf="!readonly" style="flex-wrap: wrap;">
-            <ion-button (click)="onActionClick('folder-add')"><i class="fa fa-folder-plus"></i>&nbsp;&nbsp;Folder</ion-button>
-            <ion-button (click)="onUploadFilesClick($event)"><i class="fa fa-upload"></i>&nbsp;&nbsp;Upload Files</ion-button>
-            <ion-button (click)="openFileBox()" *ngIf="!fullPage"><i class="fa fa-external-link-alt"></i>&nbsp;&nbsp;Open</ion-button>
+            <ion-button [disabled]="isLoading" (click)="onActionClick('folder-add')"><i class="fa fa-folder-plus"></i>&nbsp;&nbsp;Folder</ion-button>
+            <ion-button [disabled]="isLoading" (click)="onUploadFilesClick($event)"><i class="fa fa-upload"></i>&nbsp;&nbsp;Upload Files</ion-button>
+            <ion-button [disabled]="isLoading" (click)="openFileBox()" *ngIf="!fullPage"><i class="fa fa-external-link-alt"></i>&nbsp;&nbsp;Open</ion-button>
 
             <div class="buffer"></div>
 
@@ -34,6 +34,7 @@
                 <ion-input
                     placeholder="Quick filter..."
                     (ionChange)="onQuickFilterChange($event)"
+                    [readonly]="isLoading"
                 ></ion-input>
             </div>
 
@@ -41,8 +42,9 @@
         </ion-buttons>
     </ion-toolbar>
     <div class="content-wrapper" (contextmenu)="onSurfaceContextMenu($event)">
-        <div *ngIf="!items || !items.length" class="empty-text" (contextmenu)="onSurfaceContextMenu($event)">No files or folders.</div>
-        <div *ngIf="items && items.length" class="folders">
+        <div *ngIf="!isLoading && (!items || !items.length)" class="empty-text" (contextmenu)="onSurfaceContextMenu($event)">No files or folders.</div>
+        <div *ngIf="isLoading" class="empty-text">Loading...</div>
+        <div *ngIf="!isLoading && items && items.length" class="folders">
             <ng-container *ngFor="let item of (visibleFilterItems ? visibleFilterItems : items)">
                 <div class="folder item" *ngIf="item.type === 'folder'" (contextmenu)="onItemContextMenu(item, $event)" (dblclick)="onItemActivate(item)">
                     <div class="icon folder"><i class="fa fa-folder"></i></div>
@@ -50,7 +52,7 @@
                 </div>
             </ng-container>
         </div>
-        <div *ngIf="items && items.length" class="files">
+        <div *ngIf="!isLoading && items && items.length" class="files">
             <ng-container *ngFor="let item of (visibleFilterItems ? visibleFilterItems : items)">
                 <div class="folder item" *ngIf="item.type === 'file'" (contextmenu)="onItemContextMenu(item, $event)" (dblclick)="onItemActivate(item)">
                     <div [ngClass]="'icon ' + item.category"><i [ngClass]="categoryIcons[item.category]"></i></div>
diff --git a/src/app/components/nodes/file-box/file-box.component.ts b/src/app/components/nodes/file-box/file-box.component.ts
index fc25068..8234da7 100644
--- a/src/app/components/nodes/file-box/file-box.component.ts
+++ b/src/app/components/nodes/file-box/file-box.component.ts
@@ -56,6 +56,7 @@ export class FileBoxComponent extends EditorNodeContract implements OnInit {
 
     protected dirty = false;
     protected pendingSetup = true;
+    public isLoading = true;
     public notAvailableOffline = false;
     public fileBoxName = 'New File Box';
     public record?: FileBoxRecord;
@@ -143,12 +144,14 @@ export class FileBoxComponent extends EditorNodeContract implements OnInit {
     }
 
     public async loadBox(): Promise<void> {
+        this.isLoading = true;
         this.fileBoxName = this.record.name;
         const files = await this.api.getFileBoxFiles(this.page.UUID, this.node.UUID, this.record.UUID);
         const children = await this.api.getFileBoxChildren(this.page.UUID, this.node.UUID, this.record.UUID);
 
         this.items = [...children, ...files];
         this.refilter();
+        this.isLoading = false;
     }
 
     public async navigateUp() {
@@ -207,7 +210,7 @@ export class FileBoxComponent extends EditorNodeContract implements OnInit {
     }
 
     async onSurfaceContextMenu(event: MouseEvent) {
-        if ( this.readonly ) {
+        if ( this.readonly || this.isLoading ) {
             return;
         }
 
@@ -266,7 +269,7 @@ export class FileBoxComponent extends EditorNodeContract implements OnInit {
     }
 
     async onItemContextMenu(item: FileBoxItem, event: MouseEvent) {
-        if ( this.readonly ) {
+        if ( this.readonly || this.isLoading ) {
             return;
         }