Fix file metadata not loading when a file is selected initially

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

mediarepo-ui/src/app/components/shared/sidebar/file-metadata/file-metadata.component.html

@@ -3,7 +3,7 @@
         <h1>File Metadata</h1>
         <mat-divider></mat-divider>
     </div>
-    <app-busy-indicator [blurBackground]="true" [darkenBackground]="false">
+    <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 (valueChangeEvent)="this.saveFileName($event)"
@@ -22,7 +22,6 @@
                     <app-metadata-entry
                         attributeName="Changed at">{{fileMetadata.change_time | date: 'dd.MM.yy HH:mm:ss'}}</app-metadata-entry>
                 </ng-container>
-
             </div>
         </div>
     </app-busy-indicator>

mediarepo-ui/src/app/components/shared/sidebar/file-metadata/file-metadata.component.ts

@@ -1,8 +1,15 @@
-import {ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, SimpleChanges, ViewChild} from "@angular/core";
+import {
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    Input,
+    OnChanges,
+    OnInit,
+    SimpleChanges
+} from "@angular/core";
 import {File} from "../../../../../api/models/File";
 import {FileService} from "../../../../services/file/file.service";
 import {FileMetadata} from "../../../../../api/api-types/files";
-import {BusyIndicatorComponent} from "../../app-common/busy-indicator/busy-indicator.component";
 
 @Component({
     selector: "app-file-metadata",
@@ -14,32 +21,34 @@ export class FileMetadataComponent implements OnInit, OnChanges {
 
     @Input() file!: File;
     public fileMetadata: FileMetadata | undefined;
+    public loading: boolean = false;
 
-    @ViewChild(BusyIndicatorComponent) busyIndicator!: BusyIndicatorComponent;
+    constructor(private changeDetector: ChangeDetectorRef, private fileService: FileService) {
-
-    constructor(private fileService: FileService) {
     }
 
     public async ngOnInit() {
-        await this.busyIndicator.wrapAsyncOperation(async () => {
+        this.loading = true;
         this.fileMetadata = await this.fileService.getFileMetadata(this.file.id);
-        });
+        this.changeDetector.markForCheck();
+        this.loading = false;
     }
 
     public async ngOnChanges(changes: SimpleChanges) {
         if (changes["file"] && (!this.fileMetadata || this.fileMetadata.file_id != this.file.id)) {
-            await this.busyIndicator.wrapAsyncOperation(async () => {
+            this.loading = true;
             this.fileMetadata = await this.fileService.getFileMetadata(this.file.id);
-            });
+            this.changeDetector.markForCheck();
+            this.loading = false;
         }
     }
 
     public async saveFileName(name: string) {
-        await this.busyIndicator.wrapAsyncOperation(async () => {
+        this.loading = true;
         const newFile = await this.fileService.updateFileName(this.file.id, name);
         if (this.fileMetadata) {
             this.fileMetadata.name = newFile.name;
+            this.changeDetector.markForCheck();
         }
-        });
+        this.loading = false;
     }
 }