fix(files): preview loading

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
nextcloud · Sep 26, 2023 · df8e040 · df8e040
1 parent de3782e
commit df8e040
Show file tree

Hide file tree

Showing 104 changed files with 161 additions and 181 deletions.
diff --git 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;
 }

diff --git a/dist/1567-1567.js b/dist/1567-1567.js
diff --git a/dist/1567-1567.js.map b/dist/1567-1567.js.map
diff --git a/dist/2719-2719.js b/dist/2719-2719.js
diff --git a/dist/2719-2719.js.map b/dist/2719-2719.js.map
diff --git a/dist/5912-5912.js b/dist/5912-5912.js
diff --git a/dist/5912-5912.js.map b/dist/5912-5912.js.map
diff --git a/dist/5941-5941.js b/dist/5941-5941.js
diff --git a/dist/1567-1567.js.LICENSE.txt → dist/5941-5941.js.LICENSE.txt b/dist/1567-1567.js.LICENSE.txt → dist/5941-5941.js.LICENSE.txt
@@ -26,28 +26,6 @@
 
 /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
 
-/**
- * @copyright 2022 Louis Chmn <louis@chmn.me>
- *
- * @author Louis Chmn <louis@chmn.me>
- *
- * @license AGPL-3.0-or-later
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
- */
-
 /**
  * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
  *

diff --git a/dist/5941-5941.js.map b/dist/5941-5941.js.map
diff --git a/dist/comments-comments-app.js b/dist/comments-comments-app.js
diff --git a/dist/comments-comments-app.js.map b/dist/comments-comments-app.js.map
diff --git a/dist/core-common.js b/dist/core-common.js
diff --git a/dist/core-common.js.map b/dist/core-common.js.map
diff --git a/dist/core-login.js b/dist/core-login.js
diff --git a/dist/core-login.js.map b/dist/core-login.js.map
diff --git a/dist/core-main.js b/dist/core-main.js
diff --git a/dist/core-main.js.map b/dist/core-main.js.map
diff --git a/dist/core-maintenance.js b/dist/core-maintenance.js
diff --git a/dist/core-maintenance.js.map b/dist/core-maintenance.js.map
diff --git a/dist/core-profile.js b/dist/core-profile.js
diff --git a/dist/core-profile.js.map b/dist/core-profile.js.map
diff --git a/dist/core-recommendedapps.js b/dist/core-recommendedapps.js
diff --git a/dist/core-recommendedapps.js.map b/dist/core-recommendedapps.js.map
diff --git a/dist/core-unified-search.js b/dist/core-unified-search.js
diff --git a/dist/core-unified-search.js.map b/dist/core-unified-search.js.map
diff --git a/dist/dashboard-main.js b/dist/dashboard-main.js
diff --git a/dist/dashboard-main.js.map b/dist/dashboard-main.js.map