From 8990b0f906c3ecd367baaec6436920d152105ba2 Mon Sep 17 00:00:00 2001
From: trivernis <trivernis@protonmail.com>
Date: Sat, 30 Oct 2021 21:55:48 +0200
Subject: [PATCH] Add loading indicator to file gallery display

Signed-off-by: trivernis <trivernis@protonmail.com>
---
 .../file-gallery/file-gallery.component.html       |  5 ++++-
 .../file-gallery/file-gallery.component.scss       | 14 ++++++++++++++
 .../file-gallery/file-gallery.component.ts         |  1 +
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.html b/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.html
index d119e9d..76e3127 100644
--- a/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.html
+++ b/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.html
@@ -5,7 +5,10 @@
   <div class="file-full-view" fxFlex="80%"
        (dblclick)="this.selectedFile? this.fileDblClickEvent.emit(this.selectedFile.data) : null">
     <div class="file-full-view-inner">
-      <img [src]="this.fileContentUrl"/>
+      <div *ngIf="!this.fileContentUrl" class="url-loading-backdrop">
+        <mat-progress-spinner mode="indeterminate" color="primary"></mat-progress-spinner>
+      </div>
+      <img [src]="this.fileContentUrl" decoding="async" alt="Image"/>
     </div>
   </div>
   <mat-divider fxFlex></mat-divider>
diff --git a/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.scss b/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.scss
index 77de222..2414535 100644
--- a/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.scss
+++ b/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.scss
@@ -34,6 +34,7 @@ app-file-gallery-entry {
   height: 100%;
   width: 100%;
   display: block;
+  position: relative;
 }
 
 img {
@@ -50,3 +51,16 @@ img {
   width: 3em;
   height: 3em;
 }
+
+.url-loading-backdrop {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  mat-progress-spinner {
+    margin: auto;
+  }
+}
diff --git a/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.ts b/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.ts
index a3f13f8..468bc39 100644
--- a/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.ts
+++ b/mediarepo-ui/src/app/components/file-gallery/file-gallery.component.ts
@@ -56,6 +56,7 @@ export class FileGalleryComponent implements OnChanges, OnInit {
    */
   async loadSelectedFile() {
     if (this.selectedFile) {
+      this.fileContentUrl = undefined;
       this.fileContentUrl = await this.fileService.readFile(this.selectedFile.data);
     }
   }