From d48cff688f8c863d8e02127e3b0502036863b6b2 Mon Sep 17 00:00:00 2001
From: trivernis <trivernis@protonmail.com>
Date: Sat, 8 Jan 2022 17:04:30 +0100
Subject: [PATCH] Improve busy indicator

Signed-off-by: trivernis <trivernis@protonmail.com>
---
 .../files-tab-sidebar.component.html          |  2 +-
 .../files-tab-sidebar.component.ts            |  5 +++++
 .../core/files-tab/files-tab.component.html   |  2 +-
 .../busy-indicator.component.scss             |  3 +--
 .../file-metadata.component.html              | 22 +++++++++----------
 .../file-metadata/file-metadata.component.ts  |  7 ++++++
 .../file-search/file-search.component.html    |  1 +
 .../file-search/file-search.component.scss    | 13 +++++++++++
 .../file-search/file-search.component.ts      |  1 +
 .../sidebar/tag-edit/tag-edit.component.html  |  2 +-
 mediarepo-ui/src/polyfills.ts                 |  2 +-
 11 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.html b/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.html
index 8c83179..6c677c9 100644
--- a/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.html
+++ b/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.html
@@ -3,7 +3,7 @@
         <mat-tab label="Search">
             <app-file-search [state]="this.state" [availableTags]="this.allTags" [contextTags]="this.tags"
                              (searchStartEvent)="this.searchStartEvent.emit($event)"
-                             (searchEndEvent)="this.onDisplayedFilesChange(); this.searchEndEvent.emit($event);"></app-file-search>
+                             (searchEndEvent)="this.onDisplayedFilesChange(); this.searchEndEvent.emit($event);" [tagsLoading]="this.tagsLoading"></app-file-search>
         </mat-tab>
         <mat-tab *ngIf="this.selectedFiles.length > 0" label="Edit Tags">
             <app-tag-edit #fileedit [files]="this.selectedFiles"></app-tag-edit>
diff --git a/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.ts b/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.ts
index ff3a8d9..d052a88 100644
--- a/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.ts
+++ b/mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.ts
@@ -42,6 +42,7 @@ export class FilesTabSidebarComponent implements OnInit, OnChanges {
     public allTags: Tag[] = [];
     public files: File[] = [];
     public tagsOfSelection: Tag[] = [];
+    public tagsLoading = false;
 
     constructor(private repoService: RepositoryService, private tagService: TagService) {
         this.repoService.selectedRepository.subscribe(
@@ -75,18 +76,22 @@ export class FilesTabSidebarComponent implements OnInit, OnChanges {
     }
 
     async loadTagsForDisplayedFiles() {
+        this.tagsLoading = true;
         this.tagsOfFiles = await this.tagService.getTagsForFiles(
             this.files.map(f => f.cd));
         this.showAllTagsFallback();
+        this.tagsLoading = false;
     }
 
     async showFileDetails(files: File[]) {
+        this.tagsLoading = true;
         this.tagsOfSelection = await this.tagService.getTagsForFiles(
             files.map(f => f.cd));
         this.tagsOfSelection = this.tagsOfSelection.sort(
             (a, b) => a.getNormalizedOutput()
                 .localeCompare(b.getNormalizedOutput()));
         this.tags = this.tagsOfSelection;
+        this.tagsLoading = false;
     }
 
     private async refreshFileSelection() {
diff --git a/mediarepo-ui/src/app/components/core/files-tab/files-tab.component.html b/mediarepo-ui/src/app/components/core/files-tab/files-tab.component.html
index b058cac..be372c1 100644
--- a/mediarepo-ui/src/app/components/core/files-tab/files-tab.component.html
+++ b/mediarepo-ui/src/app/components/core/files-tab/files-tab.component.html
@@ -5,7 +5,7 @@
                                [selectedFiles]="this.selectedFiles"></app-files-tab-sidebar>
     </mat-drawer>
     <mat-drawer-content>
-        <app-busy-indicator [blurBackground]="true" [busy]="contentLoading">
+        <app-busy-indicator [blurBackground]="true" [busy]="contentLoading" [darkenBackground]="true">
             <app-file-multiview [mode]="state.mode.value" (modeChangeEvent)="state.mode.next($event)" (fileSelectEvent)="this.onFileSelect($event)" [files]="this.files" [preselectedFile]="this.getStateSelectedFile()"></app-file-multiview>
         </app-busy-indicator>
     </mat-drawer-content>
diff --git a/mediarepo-ui/src/app/components/shared/app-common/busy-indicator/busy-indicator.component.scss b/mediarepo-ui/src/app/components/shared/app-common/busy-indicator/busy-indicator.component.scss
index e5b12de..b5bef4e 100644
--- a/mediarepo-ui/src/app/components/shared/app-common/busy-indicator/busy-indicator.component.scss
+++ b/mediarepo-ui/src/app/components/shared/app-common/busy-indicator/busy-indicator.component.scss
@@ -15,12 +15,11 @@
 }
 
 .busy-indicator-overlay.blur {
-    background-color: rgba(0, 0, 0, 0.5);
     backdrop-filter: blur(5px);
 }
 
 .busy-indicator-overlay.darken {
-    background-color: rgba(0, 0, 0, 0.2);
+    background-color: rgba(0, 0, 0, 0.5);
 }
 
 ::ng-deep app-busy-indicator {
diff --git a/mediarepo-ui/src/app/components/shared/sidebar/file-metadata/file-metadata.component.html b/mediarepo-ui/src/app/components/shared/sidebar/file-metadata/file-metadata.component.html
index 743d47d..0644be9 100644
--- a/mediarepo-ui/src/app/components/shared/sidebar/file-metadata/file-metadata.component.html
+++ b/mediarepo-ui/src/app/components/shared/sidebar/file-metadata/file-metadata.component.html
@@ -3,16 +3,16 @@
         <h1>File Metadata</h1>
         <mat-divider></mat-divider>
     </div>
-    <div class="file-metadata-entries-scroll-container">
-        <div class="file-metadata-entries">
-
-            <app-editable-metadata-entry *ngIf="fileMetadata" attributeName="Name" [value]="fileMetadata.name ?? ''" (valueChangeEvent)="this.saveFileName($event)"></app-editable-metadata-entry>
-            <app-metadata-entry attributeName="Content Descriptor (CD)">{{file.cd}}</app-metadata-entry>
-            <app-metadata-entry attributeName="Mime Type">{{file.mimeType}}</app-metadata-entry>
-            <app-metadata-entry *ngIf="fileMetadata" attributeName="Imported at">{{fileMetadata.import_time.toLocaleString()}}</app-metadata-entry>
-            <app-metadata-entry *ngIf="fileMetadata" attributeName="Created at">{{fileMetadata.creation_time.toLocaleString()}}</app-metadata-entry>
-            <app-metadata-entry *ngIf="fileMetadata" attributeName="Changed at">{{fileMetadata.change_time.toLocaleString()}}</app-metadata-entry>
-
+    <app-busy-indicator [blurBackground]="true" [busy]="this.loading" [darkenBackground]="false">
+        <div class="file-metadata-entries-scroll-container">
+            <div class="file-metadata-entries">
+                <app-editable-metadata-entry *ngIf="fileMetadata" attributeName="Name" [value]="fileMetadata.name ?? ''" (valueChangeEvent)="this.saveFileName($event)"></app-editable-metadata-entry>
+                <app-metadata-entry attributeName="Content Descriptor (CD)">{{file.cd}}</app-metadata-entry>
+                <app-metadata-entry attributeName="Mime Type">{{file.mimeType}}</app-metadata-entry>
+                <app-metadata-entry *ngIf="fileMetadata" attributeName="Imported at">{{fileMetadata.import_time.toLocaleString()}}</app-metadata-entry>
+                <app-metadata-entry *ngIf="fileMetadata" attributeName="Created at">{{fileMetadata.creation_time.toLocaleString()}}</app-metadata-entry>
+                <app-metadata-entry *ngIf="fileMetadata" attributeName="Changed at">{{fileMetadata.change_time.toLocaleString()}}</app-metadata-entry>
+            </div>
         </div>
-    </div>
+    </app-busy-indicator>
 </div>
diff --git a/mediarepo-ui/src/app/components/shared/sidebar/file-metadata/file-metadata.component.ts b/mediarepo-ui/src/app/components/shared/sidebar/file-metadata/file-metadata.component.ts
index c5175ce..733385d 100644
--- a/mediarepo-ui/src/app/components/shared/sidebar/file-metadata/file-metadata.component.ts
+++ b/mediarepo-ui/src/app/components/shared/sidebar/file-metadata/file-metadata.component.ts
@@ -18,24 +18,31 @@ export class FileMetadataComponent implements OnInit, OnChanges {
 
     @Input() file!: File;
     public fileMetadata: FileMetadata | undefined;
+    public loading = false;
 
     constructor(private fileService: FileService) {
     }
 
     public async ngOnInit() {
+        this.loading = true;
         this.fileMetadata = await this.fileService.getFileMetadata(this.file.id);
+        this.loading = false;
     }
 
     public async ngOnChanges(changes:SimpleChanges) {
         if (changes["file"] && (!this.fileMetadata || this.fileMetadata.file_id != this.file.id)) {
+            this.loading = true;
             this.fileMetadata = await this.fileService.getFileMetadata(this.file.id);
+            this.loading = false;
         }
     }
 
     public async saveFileName(name: string) {
+        this.loading = true;
         const newFile = await this.fileService.updateFileName(this.file.id, name);
         if (this.fileMetadata) {
             this.fileMetadata.name = newFile.name;
         }
+        this.loading = false;
     }
 }
diff --git a/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.html b/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.html
index 7847689..8183620 100644
--- a/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.html
+++ b/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.html
@@ -39,6 +39,7 @@
                 <app-tag-item [tag]="tag"></app-tag-item>
             </div>
         </cdk-virtual-scroll-viewport>
+        <app-busy-indicator [busy]="this.tagsLoading" [blurBackground]="true" [darkenBackground]="false"></app-busy-indicator>
     </div>
 
 </div>
diff --git a/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.scss b/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.scss
index fc69ec7..3d055e9 100644
--- a/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.scss
+++ b/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.scss
@@ -119,3 +119,16 @@ mat-divider {
         margin: auto;
     }
 }
+
+.file-tag-list {
+    position: relative;
+}
+
+app-busy-indicator {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    z-index: 99;
+}
diff --git a/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.ts b/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.ts
index 8da1fc1..4a496d5 100644
--- a/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.ts
+++ b/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.ts
@@ -37,6 +37,7 @@ export class FileSearchComponent implements AfterViewChecked, OnInit {
     @Input() availableTags: Tag[] = [];
     @Input() contextTags: Tag[] = [];
     @Input() state!: TabState;
+    @Input() tagsLoading = false;
 
     @Output() searchStartEvent = new EventEmitter<void>();
     @Output() searchEndEvent = new EventEmitter<void>();
diff --git a/mediarepo-ui/src/app/components/shared/sidebar/tag-edit/tag-edit.component.html b/mediarepo-ui/src/app/components/shared/sidebar/tag-edit/tag-edit.component.html
index 5c77125..c72c883 100644
--- a/mediarepo-ui/src/app/components/shared/sidebar/tag-edit/tag-edit.component.html
+++ b/mediarepo-ui/src/app/components/shared/sidebar/tag-edit/tag-edit.component.html
@@ -33,5 +33,5 @@
             </mat-select>
         </mat-form-field>
     </div>
-    <app-busy-indicator *ngIf="this.loading" [busy]="this.loading" [blurBackground]="true" [darkenBackground]="true"></app-busy-indicator>
+    <app-busy-indicator *ngIf="this.loading" [busy]="this.loading" [blurBackground]="true"></app-busy-indicator>
 </div>
diff --git a/mediarepo-ui/src/polyfills.ts b/mediarepo-ui/src/polyfills.ts
index 9295036..48d7f58 100644
--- a/mediarepo-ui/src/polyfills.ts
+++ b/mediarepo-ui/src/polyfills.ts
@@ -3,7 +3,7 @@
  * You can add your own extra polyfills to this file.
  *
  * This file is divided into 2 sections:
- *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   1. Browser polyfills. These are applied before tagsLoading ZoneJS and are sorted by browsers.
  *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
  *      file.
  *