diff --git a/apps/files/src/components/FileEntry/FileEntryPreview.vue b/apps/files/src/components/FileEntry/FileEntryPreview.vue index 7f8926e2301d6..a062259cb3404 100644 --- a/apps/files/src/components/FileEntry/FileEntryPreview.vue +++ b/apps/files/src/components/FileEntry/FileEntryPreview.vue @@ -39,7 +39,7 @@ :class="{'files-list__row-icon-preview--loaded': backgroundFailed === false}" loading="lazy" :src="previewUrl" - @error="backgroundFailed = true" + @error="onBackgroundError" @load="backgroundFailed = false"> @@ -218,12 +218,21 @@ export default Vue.extend({ }, methods: { + // Called from FileEntry reset() { - if (this.backgroundFailed === true && this.$refs.previewImg) { + // Reset background state to cancel any ongoing requests + this.backgroundFailed = undefined + if (this.$refs.previewImg) { this.$refs.previewImg.src = '' } - // Reset background state - this.backgroundFailed = undefined + }, + + onBackgroundError(event) { + // Do not fail if we just reset the background + if (event.target?.src === '') { + return + } + this.backgroundFailed = true }, t, diff --git a/apps/files/src/components/FileEntryMixin.ts b/apps/files/src/components/FileEntryMixin.ts index 3c4b0c5d1bde8..d3a9e80c9b7b5 100644 --- a/apps/files/src/components/FileEntryMixin.ts +++ b/apps/files/src/components/FileEntryMixin.ts @@ -175,8 +175,10 @@ export default defineComponent({ * When the source changes, reset the preview * and fetch the new one. */ - source() { - this.resetState() + source(a: Node, b: Node) { + if (a.source !== b.source) { + this.resetState() + } }, }, @@ -189,7 +191,8 @@ export default defineComponent({ // Reset loading state this.loading = '' - this.$refs.preview.reset() + // Reset the preview state + this.$refs?.preview?.reset?.() // Close menu this.openedMenu = false