diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.spec.js b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.spec.js
index 6bb5412264f..098107f0f14 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.spec.js
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.spec.js
@@ -23,7 +23,6 @@ describe('FilePreview.vue', () => {
 	let localVue
 	let testStoreConfig
 	let propsData
-	let imageMock
 	let getUserIdMock
 	let oldPixelRatio
 
@@ -39,16 +38,6 @@ describe('FilePreview.vue', () => {
 		testStoreConfig.modules.actorStore.getters.getUserId = () => getUserIdMock
 		store = new Vuex.Store(testStoreConfig)
 
-		imageMock = {
-			onload: jest.fn(),
-			onerror: jest.fn(),
-			src: null,
-		}
-		jest.spyOn(global, 'Image')
-			.mockImplementation(() => {
-				return imageMock
-			})
-
 		propsData = {
 			token: 'TOKEN',
 			file: {
@@ -84,7 +73,7 @@ describe('FilePreview.vue', () => {
 				propsData,
 			})
 
-			await imageMock.onload()
+			await wrapper.find('img').trigger('load')
 
 			expect(wrapper.element.tagName).toBe('A')
 			const imageUrl = parseRelativeUrl(wrapper.find('img').attributes('src'))
@@ -107,7 +96,7 @@ describe('FilePreview.vue', () => {
 				propsData,
 			})
 
-			await imageMock.onload()
+			await wrapper.find('img').trigger('load')
 
 			expect(wrapper.element.tagName).toBe('A')
 			const imageUrl = parseRelativeUrl(wrapper.find('img').attributes('src'))
@@ -129,7 +118,7 @@ describe('FilePreview.vue', () => {
 				propsData,
 			})
 
-			await imageMock.onload()
+			await wrapper.find('img').trigger('load')
 
 			expect(wrapper.element.tagName).toBe('A')
 			const imageUrl = parseRelativeUrl(wrapper.find('img').attributes('src'))
@@ -145,7 +134,7 @@ describe('FilePreview.vue', () => {
 				propsData,
 			})
 
-			await imageMock.onload()
+			await wrapper.find('img').trigger('load')
 
 			expect(wrapper.element.tagName).toBe('A')
 			const imageUrl = parseRelativeUrl(wrapper.find('img').attributes('src'))
@@ -185,7 +174,7 @@ describe('FilePreview.vue', () => {
 					propsData,
 				})
 
-				await imageMock.onload()
+				await wrapper.find('img').trigger('load')
 
 				expect(wrapper.element.tagName).toBe('DIV')
 				expect(wrapper.find('img').attributes('src')).toBe('blob:XYZ')
@@ -206,8 +195,8 @@ describe('FilePreview.vue', () => {
 			})
 
 			expect(wrapper.element.tagName).toBe('A')
-			expect(wrapper.find('img').exists()).toBe(false)
-			expect(wrapper.find('.loading').exists()).toBe(true)
+			const spinner = wrapper.findComponent({ name: 'NcLoadingIcon' })
+			expect(spinner.exists()).toBe(true)
 		})
 
 		test('renders default mime icon on load error', async () => {
@@ -218,7 +207,7 @@ describe('FilePreview.vue', () => {
 				propsData,
 			})
 
-			await imageMock.onerror()
+			await wrapper.find('img').trigger('error')
 
 			expect(wrapper.element.tagName).toBe('A')
 			const imageUrl = wrapper.find('img').attributes('src')
@@ -235,7 +224,7 @@ describe('FilePreview.vue', () => {
 				propsData,
 			})
 
-			await imageMock.onload()
+			await wrapper.find('img').trigger('load')
 
 			expect(wrapper.element.tagName).toBe('A')
 			const imageUrl = wrapper.find('img').attributes('src')
@@ -259,7 +248,7 @@ describe('FilePreview.vue', () => {
 					propsData,
 				})
 
-				await imageMock.onload()
+				await wrapper.find('img').trigger('load')
 
 				expect(wrapper.element.tagName).toBe('A')
 				expect(wrapper.find('img').attributes('src'))
@@ -276,7 +265,7 @@ describe('FilePreview.vue', () => {
 					propsData,
 				})
 
-				await imageMock.onload()
+				await wrapper.find('img').trigger('load')
 
 				expect(wrapper.element.tagName).toBe('A')
 				expect(wrapper.find('img').attributes('src'))
@@ -294,7 +283,7 @@ describe('FilePreview.vue', () => {
 					propsData,
 				})
 
-				await imageMock.onload()
+				await wrapper.find('img').trigger('load')
 
 				expect(wrapper.element.tagName).toBe('A')
 				expect(wrapper.find('img').attributes('src'))
@@ -311,7 +300,7 @@ describe('FilePreview.vue', () => {
 					propsData,
 				})
 
-				await imageMock.onload()
+				await wrapper.find('img').trigger('load')
 
 				expect(wrapper.element.tagName).toBe('A')
 				const imageUrl = parseRelativeUrl(wrapper.find('img').attributes('src'))
@@ -370,7 +359,7 @@ describe('FilePreview.vue', () => {
 					propsData,
 				})
 
-				await imageMock.onload()
+				await wrapper.find('img').trigger('load')
 
 				await wrapper.find('a').trigger('click')
 
@@ -404,7 +393,7 @@ describe('FilePreview.vue', () => {
 					propsData,
 				})
 
-				await imageMock.onload()
+				await wrapper.find('img').trigger('load')
 
 				await wrapper.find('a').trigger('click')
 
@@ -419,7 +408,7 @@ describe('FilePreview.vue', () => {
 					propsData,
 				})
 
-				await imageMock.onload()
+				await wrapper.find('img').trigger('load')
 
 				// no error
 				await wrapper.find('a').trigger('click')
@@ -450,7 +439,7 @@ describe('FilePreview.vue', () => {
 						propsData,
 					})
 
-					await imageMock.onload()
+					await wrapper.find('img').trigger('load')
 
 					const buttonEl = wrapper.findComponent(PlayCircleOutline)
 					expect(buttonEl.exists()).toBe(visible)
@@ -491,7 +480,7 @@ describe('FilePreview.vue', () => {
 						propsData,
 					})
 
-					await imageMock.onerror()
+					await wrapper.find('img').trigger('error')
 
 					const buttonEl = wrapper.findComponent(PlayCircleOutline)
 					expect(buttonEl.exists()).toBe(false)
@@ -524,7 +513,7 @@ describe('FilePreview.vue', () => {
 				propsData,
 			})
 
-			await imageMock.onload()
+			await wrapper.find('img').trigger('load')
 
 			expect(wrapper.element.tagName).toBe('DIV')
 			await wrapper.findComponent(NcButton).trigger('click')
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
index 8633d4fa2ec..7d8462eb5d7 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
@@ -15,40 +15,36 @@
 		v-bind="filePreviewBinding"
 		@click.exact="handleClick"
 		@keydown.enter="handleClick">
-		<span v-if="!isLoading || fallbackLocalUrl"
+		<span v-tooltip="previewTooltip"
 			class="image-container"
-			:class="{'playable': isPlayable}">
-			<span v-if="isPlayable && !smallPreview" class="play-video-button">
-				<PlayCircleOutline :size="48"
-					fill-color="#ffffff" />
-			</span>
-			<img v-if="!failed"
-				v-tooltip="previewTooltip"
+			:class="{'playable': isPlayable}"
+			:style="imageContainerStyle">
+			<img class="file-preview__image"
 				:class="previewImageClass"
-				class="file-preview__image"
-				alt=""
-				:src="previewUrl">
-			<img v-else
-				:class="previewImageClass"
-				alt=""
-				:src="defaultIconUrl">
-			<NcProgressBar v-if="showUploadProgress"
-				class="file-preview__progress"
-				type="circular"
-				:value="uploadProgress" />
+				:alt="file.name"
+				:src="failed ? defaultIconUrl : previewUrl"
+				@load="onLoad"
+				@error="onError">
+			<template v-if="!isLoading || fallbackLocalUrl">
+				<span v-if="isPlayable && !smallPreview" class="play-video-button">
+					<PlayCircleOutline :size="48"
+						fill-color="#ffffff" />
+				</span>
+				<NcProgressBar v-if="showUploadProgress"
+					class="file-preview__progress"
+					type="circular"
+					:value="uploadProgress" />
+			</template>
+			<TransitionWrapper v-else-if="isLoading" name="fade">
+				<canvas v-if="file.blurhash"
+					ref="blurCanvas"
+					width="32"
+					height="32"
+					class="preview preview-loading" />
+				<NcLoadingIcon v-else class="preview preview-loading" />
+			</TransitionWrapper>
 		</span>
-		<template v-else-if="isLoading">
-			<canvas v-if="file.blurhash"
-				ref="blurCanvas"
-				width="32"
-				height="32"
-				class="preview"
-				:style="imageContainerStyle" />
-			<span v-else
-				v-tooltip="previewTooltip"
-				class="preview loading"
-				:style="imageContainerStyle" />
-		</template>
+
 		<NcButton v-if="isUploadEditor"
 			class="remove-file"
 			tabindex="1"
@@ -77,10 +73,12 @@ import { generateUrl, imagePath, generateRemoteUrl } from '@nextcloud/router'
 import { getUploader } from '@nextcloud/upload'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import NcProgressBar from '@nextcloud/vue/dist/Components/NcProgressBar.js'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
 import AudioPlayer from './AudioPlayer.vue'
+import TransitionWrapper from '../../../../UIShared/TransitionWrapper.vue'
 
 import { useViewer } from '../../../../../composables/useViewer.js'
 import { SHARED_ITEM } from '../../../../../constants.js'
@@ -98,10 +96,13 @@ export default {
 	name: 'FilePreview',
 
 	components: {
+		NcButton,
+		NcLoadingIcon,
 		NcProgressBar,
+		TransitionWrapper,
+		// Icons
 		Close,
 		PlayCircleOutline,
-		NcButton,
 	},
 
 	directives: {
@@ -183,6 +184,7 @@ export default {
 			uploadManager: null,
 		}
 	},
+
 	computed: {
 		shouldShowFileDetail() {
 			if (this.isSharedItems && !this.rowLayout) {
@@ -477,16 +479,6 @@ export default {
 			imageData.data.set(decode(this.file.blurhash, 32, 32))
 			ctx.putImageData(imageData, 0, 0)
 		}
-
-		const img = new Image()
-		img.onerror = () => {
-			this.isLoading = false
-			this.failed = true
-		}
-		img.onload = () => {
-			this.isLoading = false
-		}
-		img.src = this.previewUrl
 	},
 
 	beforeDestroy() {
@@ -495,6 +487,16 @@ export default {
 
 	methods: {
 		t,
+
+		onLoad() {
+			this.isLoading = false
+		},
+
+		onError() {
+			this.isLoading = false
+			this.failed = true
+		},
+
 		handleClick(event) {
 			if (this.isUploadEditor) {
 				this.$emit('remove-file', this.file.id)
@@ -574,12 +576,6 @@ export default {
 		transform: translate(100%, -50%);
 	}
 
-	.loading {
-		display: inline-block;
-		min-width: 32px;
-		background-color: var(--color-background-dark);
-	}
-
 	.mimeicon {
 		min-height: 128px;
 	}
@@ -590,31 +586,39 @@ export default {
 	}
 
 	.preview {
-		display: inline-block;
 		border-radius: var(--border-radius);
 		max-width: 100%;
 		max-height: 384px;
 	}
 
 	.preview-medium {
-		display: inline-block;
 		border-radius: var(--border-radius);
 		max-width: 100%;
 		max-height: 192px;
 	}
 
 	.preview-small {
-		display: inline-block;
 		border-radius: var(--border-radius);
 		max-width: 100%;
 		max-height: 32px;
 	}
 
+	.preview-loading {
+		position: absolute;
+		border-radius: var(--border-radius);
+		width: 100%;
+		height: 100%;
+		background-color: var(--color-background-dark);
+	}
+
 	.image-container {
 		position: relative;
-		display: inline-block;
+		display: inline-flex;
 		width: 100%;
 		height: 100%;
+		max-width: 100%;
+		max-height: 100%;
+		border-radius: var(--border-radius);
 
 		&.playable {
 			.preview {