Add loading indicator to file gallery display

Signed-off-by: trivernis <trivernis@protonmail.com>

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>

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;
+  }
+}

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);
     }
   }