From bd303c2f5cfe42317f849227be1f9a256c4c83a4 Mon Sep 17 00:00:00 2001
From: Kevin Piacentini <kevinpiac@gmail.com>
Date: Thu, 26 Oct 2023 16:15:29 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Add=20image=20placeholder=20whil?=
 =?UTF-8?q?e=20loading=20it?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../chat/chat-message/Attachment.svelte       | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/components/chat/chat-message/Attachment.svelte b/frontend/src/lib/components/chat/chat-message/Attachment.svelte
index aefe539..0803094 100644
--- a/frontend/src/lib/components/chat/chat-message/Attachment.svelte
+++ b/frontend/src/lib/components/chat/chat-message/Attachment.svelte
@@ -27,11 +27,22 @@
 	};
 
 	let isImageBroken = false;
+	let isImageLoaded = false;
 
 	const getImageSrc = () => {
 		return backendService.getImagePreviewUrl(id);
 	};
 
+	const imageLoader = (img: HTMLImageElement) => {
+		img.onload = () => {
+			setTimeout(() => {
+				isImageLoaded = true;
+				img.classList.remove("hidden");
+			}, 200);
+		};
+		return;
+	};
+
 	$: isImage = mimeType?.startsWith("image/");
 </script>
 
@@ -42,7 +53,7 @@
 		on:mouseleave={() => (isHovering = false)}>
 		<div
 			on:click={download}
-			class="{!isHovering
+			class="{!isHovering || !isImageLoaded
 				? 'hidden'
 				: ''} flex items-center justify-between rounded-md absolute right-3 top-10 bg-background-accent dark:bg-background-accent-dark hover:bg-background-accent/90 hover:dark:bg-background-accent-dark/90">
 			<div
@@ -64,12 +75,17 @@
 					<Icon src={Photo} size="50px" class="text-body-base dark:text-body-base-dark" />
 				</div>
 			{:else}
+				{#if !isImageLoaded}
+					<div
+						class="w-[300px] h-[150px] bg-background-tertiary dark:bg-background-tertiary-dark rounded-md animate-pulse" />
+				{/if}
 				<Lightbox>
 					<img
+						use:imageLoader
 						on:error={() => (isImageBroken = true)}
 						src={getImageSrc()}
 						alt={name}
-						class="max-w-[400px] max-h-[300px] rounded-md" />
+						class="max-w-[400px] max-h-[300px] rounded-md hidden" />
 				</Lightbox>
 			{/if}
 		</div>