From 8990b0f906c3ecd367baaec6436920d152105ba2 Mon Sep 17 00:00:00 2001 From: trivernis Date: Sat, 30 Oct 2021 21:55:48 +0200 Subject: [PATCH] Add loading indicator to file gallery display Signed-off-by: trivernis --- .../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 @@
- +
+ +
+ Image
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); } }