Add loading indicator to file gallery display

Signed-off-by: trivernis <trivernis@protonmail.com>
pull/4/head
trivernis 3 years ago
parent b989e02bee
commit 8990b0f906

@ -5,7 +5,10 @@
<div class="file-full-view" fxFlex="80%" <div class="file-full-view" fxFlex="80%"
(dblclick)="this.selectedFile? this.fileDblClickEvent.emit(this.selectedFile.data) : null"> (dblclick)="this.selectedFile? this.fileDblClickEvent.emit(this.selectedFile.data) : null">
<div class="file-full-view-inner"> <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>
</div> </div>
<mat-divider fxFlex></mat-divider> <mat-divider fxFlex></mat-divider>

@ -34,6 +34,7 @@ app-file-gallery-entry {
height: 100%; height: 100%;
width: 100%; width: 100%;
display: block; display: block;
position: relative;
} }
img { img {
@ -50,3 +51,16 @@ img {
width: 3em; width: 3em;
height: 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;
}
}

@ -56,6 +56,7 @@ export class FileGalleryComponent implements OnChanges, OnInit {
*/ */
async loadSelectedFile() { async loadSelectedFile() {
if (this.selectedFile) { if (this.selectedFile) {
this.fileContentUrl = undefined;
this.fileContentUrl = await this.fileService.readFile(this.selectedFile.data); this.fileContentUrl = await this.fileService.readFile(this.selectedFile.data);
} }
} }

Loading…
Cancel
Save