(fix) heavy files are not displayed immediatly

Author: antoine92190

src/lib/Message/MessageFiles/MessageFile/MessageFile.scss

@@ -6,10 +6,6 @@
 		cursor: pointer;
 	}
 
-	.vac-image-loading {
-		filter: blur(3px);
-	}
-
 	.vac-image-buttons {
 		position: absolute;
 		width: 100%;

src/lib/Message/MessageFiles/MessageFile/MessageFile.vue

@@ -25,7 +25,7 @@
 			<div
 				class="vac-message-image"
 				:class="{
-					'vac-image-loading':
+					'vac-blur-loading':
 						isImageLoading && message.senderId === currentUserId
 				}"
 				:style="{

src/lib/Room/Room.vue

@@ -1137,17 +1137,26 @@ export default {
 
 			Array.from(files).forEach(async file => {
 				const fileURL = URL.createObjectURL(file)
-				const blobFile = await fetch(fileURL).then(res => res.blob())
 				const typeIndex = file.name.lastIndexOf('.')
 
 				this.files.push({
-					blob: blobFile,
+					loading: true,
 					name: file.name.substring(0, typeIndex),
 					size: file.size,
 					type: file.type,
 					extension: file.name.substring(typeIndex + 1),
 					localUrl: fileURL
 				})
+
+				const blobFile = await fetch(fileURL).then(res => res.blob())
+
+				let loadedFile = this.files.find(file => file.localUrl === fileURL)
+
+				if (loadedFile) {
+					loadedFile.blob = blobFile
+					loadedFile.loading = false
+					delete loadedFile.loading
+				}
 			})
 
 			setTimeout(() => (this.fileDialog = false), 500)

src/lib/Room/RoomFiles/RoomFile/RoomFile.vue

@@ -1,5 +1,11 @@
 <template>
 	<div class="vac-room-file-container">
+		<loader :show="file.loading">
+			<template v-for="(idx, name) in $scopedSlots" #[name]="data">
+				<slot :name="name" v-bind="data" />
+			</template>
+		</loader>
+
 		<div
 			class="vac-svg-button vac-icon-remove"
 			@click="$emit('remove-file', index)"
@@ -12,16 +18,25 @@
 		<div
 			v-if="isImage"
 			class="vac-message-image"
+			:class="{ 'vac-blur-loading': file.loading }"
 			:style="{
 				'background-image': `url('${file.localUrl || file.url}')`
 			}"
 		/>
 
-		<video v-else-if="isVideo" controls>
+		<video
+			v-else-if="isVideo"
+			controls
+			:class="{ 'vac-blur-loading': file.loading }"
+		>
 			<source :src="file.localUrl || file.url" />
 		</video>
 
-		<div v-else class="vac-file-container">
+		<div
+			v-else
+			class="vac-file-container"
+			:class="{ 'vac-blur-loading': file.loading }"
+		>
 			<div>
 				<slot name="file-icon">
 					<svg-icon name="file" />
@@ -38,13 +53,15 @@
 </template>
 
 <script>
+import Loader from '../../../../components/Loader/Loader'
 import SvgIcon from '../../../../components/SvgIcon/SvgIcon'
 
 const { isImageFile, isVideoFile } = require('../../../../utils/media-file')
 
 export default {
 	name: 'RoomFiles',
 	components: {
+		Loader,
 		SvgIcon
 	},
 

src/styles/helper.scss

@@ -60,6 +60,10 @@
 	border-radius: 50%;
 }
 
+.vac-blur-loading {
+	filter: blur(3px);
+}
+
 .vac-badge-counter {
 	height: 13px;
 	width: auto;