Do not load preview if version tab is not active

Signed-off-by: Louis Chemineau <louis@chmn.me>

apps/files/src/models/Tab.js

@@ -28,6 +28,7 @@ export default class Tab {
 	_icon
 	_iconSvgSanitized
 	_mount
+	_setIsActive
 	_update
 	_destroy
 	_enabled
@@ -42,12 +43,13 @@ export default class Tab {
 	 * @param {?string} options.icon the icon css class
 	 * @param {?string} options.iconSvg the icon in svg format
 	 * @param {Function} options.mount function to mount the tab
+	 * @param {Function} [options.setIsActive] function to forward the active state of the tab
 	 * @param {Function} options.update function to update the tab
 	 * @param {Function} options.destroy function to destroy the tab
 	 * @param {Function} [options.enabled] define conditions whether this tab is active. Must returns a boolean
 	 * @param {Function} [options.scrollBottomReached] executed when the tab is scrolled to the bottom
 	 */
-	constructor({ id, name, icon, iconSvg, mount, update, destroy, enabled, scrollBottomReached } = {}) {
+	constructor({ id, name, icon, iconSvg, mount, setIsActive, update, destroy, enabled, scrollBottomReached } = {}) {
 		if (enabled === undefined) {
 			enabled = () => true
 		}
@@ -68,6 +70,9 @@ export default class Tab {
 		if (typeof mount !== 'function') {
 			throw new Error('The mount argument should be a function')
 		}
+		if (setIsActive !== undefined && typeof setIsActive !== 'function') {
+			throw new Error('The setIsActive argument should be a function')
+		}
 		if (typeof update !== 'function') {
 			throw new Error('The update argument should be a function')
 		}
@@ -85,6 +90,7 @@ export default class Tab {
 		this._name = name
 		this._icon = icon
 		this._mount = mount
+		this._setIsActive = setIsActive
 		this._update = update
 		this._destroy = destroy
 		this._enabled = enabled
@@ -119,6 +125,10 @@ export default class Tab {
 		return this._mount
 	}
 
+	get setIsActive() {
+		return this._setIsActive || (() => undefined)
+	}
+
 	get update() {
 		return this._update
 	}

apps/files/src/views/Sidebar.vue

@@ -366,6 +366,7 @@ export default {
 		 */
 		setActiveTab(id) {
 			OCA.Files.Sidebar.setActiveTab(id)
+			this.tabs.forEach(tab => tab.setIsActive(id === tab.id))
 		},
 
 		/**
@@ -453,6 +454,7 @@ export default {
 						if (this.$refs.tabs) {
 							this.$refs.tabs.updateTabs()
 						}
+						this.setActiveTab(this.Sidebar.activeTab || this.tabs[0].id)
 					})
 				} catch (error) {
 					this.error = t('files', 'Error while loading the file data')

apps/files_versions/src/components/Version.vue

@@ -23,14 +23,15 @@
 			:force-display-actions="true"
 			data-files-versions-version>
 			<template #icon>
-				<img v-if="(isCurrent || version.hasPreview) && !previewError"
+				<div v-if="!(loadPreview || previewLoaded)" class="version__image" />
+				<img v-else-if="isCurrent || version.hasPreview"
 					:src="previewURL"
 					alt=""
 					decoding="async"
 					fetchpriority="low"
 					loading="lazy"
 					class="version__image"
-					@error="previewError = true">
+					@load="previewLoaded = true">
 				<div v-else
 					class="version__image">
 					<ImageOffOutline :size="20" />
@@ -185,13 +186,17 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		loadPreview: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		return {
+			previewLoaded: false,
 			showVersionLabelForm: false,
 			formVersionLabelValue: this.version.label,
 			capabilities: loadState('core', 'capabilities', { files: { version_labeling: false, version_deletion: false } }),
-			previewError: false,
 		}
 	},
 	computed: {

apps/files_versions/src/files_versions_tab.js

@@ -59,6 +59,9 @@ window.addEventListener('DOMContentLoaded', function() {
 		update(fileInfo) {
 			TabInstance.update(fileInfo)
 		},
+		setIsActive(isActive) {
+			TabInstance.setIsActive(isActive)
+		},
 		destroy() {
 			TabInstance.$destroy()
 			TabInstance = null

apps/files_versions/src/views/VersionTab.vue

@@ -19,6 +19,7 @@
 	<ul data-files-versions-versions-list>
 		<Version v-for="version in orderedVersions"
 			:key="version.mtime"
+			:load-preview="isActive"
 			:version="version"
 			:file-info="fileInfo"
 			:is-current="version.mtime === fileInfo.mtime"
@@ -42,6 +43,7 @@ export default {
 	data() {
 		return {
 			fileInfo: null,
+			isActive: false,
 			/** @type {import('../utils/versions.js').Version[]} */
 			versions: [],
 			loading: false,
@@ -89,6 +91,13 @@ export default {
 			this.fetchVersions()
 		},
 
+		/**
+		 * @param {boolean} isActive whether the tab is active
+		 */
+		async setIsActive(isActive) {
+			this.isActive = isActive
+		},
+
 		/**
 		 * Get the existing versions infos
 		 */