From a9a769d9025617225fd0e55dd94306b5e024ad21 Mon Sep 17 00:00:00 2001
From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Date: Wed, 22 Feb 2023 18:52:23 +0100
Subject: [PATCH] fix(web): hide img alt text while loading (#1834)

---
 .../shared-components/immich-thumbnail.svelte  | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/web/src/lib/components/shared-components/immich-thumbnail.svelte b/web/src/lib/components/shared-components/immich-thumbnail.svelte
index b4b10e9f36..f2cb9b4ea5 100644
--- a/web/src/lib/components/shared-components/immich-thumbnail.svelte
+++ b/web/src/lib/components/shared-components/immich-thumbnail.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import IntersectionObserver from '$lib/components/asset-viewer/intersection-observer.svelte';
 	import { AssetResponseDto, AssetTypeEnum, getFileUrl, ThumbnailFormat } from '@api';
-	import { createEventDispatcher, onDestroy } from 'svelte';
+	import { createEventDispatcher } from 'svelte';
 	import CheckCircle from 'svelte-material-icons/CheckCircle.svelte';
 	import MotionPauseOutline from 'svelte-material-icons/MotionPauseOutline.svelte';
 	import MotionPlayOutline from 'svelte-material-icons/MotionPlayOutline.svelte';
@@ -22,14 +22,13 @@
 	export let publicSharedKey = '';
 	export let isRoundedCorner = false;
 
-	let imageData: string;
-
 	let mouseOver = false;
 	let playMotionVideo = false;
 	$: dispatch('mouse-event', { isMouseOver: mouseOver, selectedGroupIndex: groupIndex });
 
 	let mouseOverIcon = false;
 	let videoPlayerNode: HTMLVideoElement;
+	let isImageLoading = true;
 	let isThumbnailVideoPlaying = false;
 	let calculateVideoDurationIntervalHandler: NodeJS.Timer;
 	let videoProgress = '00:00';
@@ -69,10 +68,6 @@
 		}
 	};
 
-	onDestroy(() => {
-		URL.revokeObjectURL(imageData);
-	});
-
 	const getSize = () => {
 		if (thumbnailSize) {
 			return `w-[${thumbnailSize}px] h-[${thumbnailSize}px]`;
@@ -255,12 +250,13 @@
 				id={asset.id}
 				style:width={`${thumbnailSize}px`}
 				style:height={`${thumbnailSize}px`}
-				in:fade={{ duration: 150 }}
 				src={`/api/asset/thumbnail/${asset.id}?format=${format}&key=${publicSharedKey}`}
 				alt={asset.id}
 				class={`object-cover ${getSize()} transition-all z-0 ${getThumbnailBorderStyle()}`}
+				class:opacity-0={isImageLoading}
 				loading="lazy"
 				draggable="false"
+				on:load|once={() => (isImageLoading = false)}
 			/>
 		{/if}
 
@@ -305,3 +301,9 @@
 		{/if}
 	</div>
 </IntersectionObserver>
+
+<style>
+	img {
+		transition: 0.2s ease all;
+	}
+</style>