From e3b2af4d9cc13853a3ed6970ec652915414d094a Mon Sep 17 00:00:00 2001
From: "John Molakvoæ (skjnldsv)" <skjnldsv@protonmail.com>
Date: Fri, 22 Sep 2023 11:47:47 +0200
Subject: fix(files): preview loading
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 apps/files/src/components/FileEntry.vue | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

(limited to 'apps/files/src/components/FileEntry.vue')

diff --git a/apps/files/src/components/FileEntry.vue b/apps/files/src/components/FileEntry.vue
index 3cef907990c..2ca02edc5b8 100644
--- a/apps/files/src/components/FileEntry.vue
+++ b/apps/files/src/components/FileEntry.vue
@@ -60,11 +60,14 @@
 				</template>
 
 				<!-- Decorative image, should not be aria documented -->
-				<img v-else-if="previewUrl && !backgroundFailed"
+				<img v-else-if="previewUrl && backgroundFailed !== true"
 					ref="previewImg"
+					alt=""
 					class="files-list__row-icon-preview"
+					:class="{'files-list__row-icon-preview--loaded': backgroundFailed === false}"
 					:src="previewUrl"
-					@error="backgroundFailed = true">
+					@error="backgroundFailed = true"
+					@load="backgroundFailed = false">
 
 				<FileIcon v-else />
 
@@ -77,7 +80,7 @@
 			</span>
 
 			<!-- Rename input -->
-			<form v-show="isRenaming"
+			<form v-if="isRenaming"
 				v-on-click-outside="stopRenaming"
 				:aria-hidden="!isRenaming"
 				:aria-label="t('files', 'Rename file')"
@@ -94,7 +97,7 @@
 					@keyup.esc="stopRenaming" />
 			</form>
 
-			<a v-show="!isRenaming"
+			<a v-else
 				ref="basename"
 				:aria-hidden="isRenaming"
 				class="files-list__row-name-link"
@@ -309,8 +312,7 @@ export default Vue.extend({
 
 	data() {
 		return {
-			dummyPreviewUrl: 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/>',
-			backgroundFailed: false,
+			backgroundFailed: undefined,
 			loading: '',
 			dragover: false,
 
@@ -651,7 +653,7 @@ export default Vue.extend({
 			this.loading = ''
 
 			// Reset background state
-			this.backgroundFailed = false
+			this.backgroundFailed = undefined
 			if (this.$refs.previewImg) {
 				this.$refs.previewImg.src = ''
 			}
@@ -1030,7 +1032,7 @@ tr {
 }
 
 /* Preview not loaded animation effect */
-.files-list__row-icon-preview:not([style*='background']) {
+.files-list__row-icon-preview:not(.files-list__row-icon-preview--loaded) {
     background: var(--color-loading-dark);
 	// animation: preview-gradient-fade 1.2s ease-in-out infinite;
 }
-- 
cgit v1.2.3