From 696900228b80c92c356578284e566a5938048c6f Mon Sep 17 00:00:00 2001
From: Thomas <9749173+uhthomas@users.noreply.github.com>
Date: Wed, 29 Nov 2023 15:09:22 +0000
Subject: [PATCH] fix(web): use native image decoder (#3074)

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
---
 .../album-page/thumbnail-selection.svelte     |  2 +-
 .../assets/thumbnail/image-thumbnail.svelte   | 16 +++++---
 .../shared-components/user-avatar.svelte      | 16 ++++++--
 web/src/lib/utils/image-load.ts               | 38 -------------------
 web/src/routes/(user)/explore/+page.svelte    |  2 +-
 5 files changed, 26 insertions(+), 48 deletions(-)
 delete mode 100644 web/src/lib/utils/image-load.ts

diff --git a/web/src/lib/components/album-page/thumbnail-selection.svelte b/web/src/lib/components/album-page/thumbnail-selection.svelte
index de984a46d4..e58bf89d38 100644
--- a/web/src/lib/components/album-page/thumbnail-selection.svelte
+++ b/web/src/lib/components/album-page/thumbnail-selection.svelte
@@ -45,7 +45,7 @@
   <section class="flex flex-wrap gap-14 overflow-y-auto px-20">
     <!-- Image grid -->
     <div class="flex flex-wrap gap-[2px]">
-      {#each album.assets as asset}
+      {#each album.assets as asset (asset.id)}
         <Thumbnail {asset} on:click={() => (selectedThumbnail = asset)} selected={isSelected(asset.id)} />
       {/each}
     </div>
diff --git a/web/src/lib/components/assets/thumbnail/image-thumbnail.svelte b/web/src/lib/components/assets/thumbnail/image-thumbnail.svelte
index a6bdaf257b..5e57cb02e8 100644
--- a/web/src/lib/components/assets/thumbnail/image-thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/image-thumbnail.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { imageLoad } from '$lib/utils/image-load';
+  import { onMount, tick } from 'svelte';
   import { fade } from 'svelte/transition';
   import { thumbHashToDataURL } from 'thumbhash';
   import { Buffer } from 'buffer';
@@ -18,12 +18,20 @@
   export let hidden = false;
   export let border = false;
   export let preload = true;
-  let complete = false;
-
   export let eyeColor: 'black' | 'white' = 'white';
+
+  let complete = false;
+  let img: HTMLImageElement;
+
+  onMount(async () => {
+    await img.decode();
+    await tick();
+    complete = true;
+  });
 </script>
 
 <img
+  bind:this={img}
   loading={preload ? 'eager' : 'lazy'}
   style:width={widthStyle}
   style:height={heightStyle}
@@ -40,8 +48,6 @@
   class:rounded-full={circle}
   class:opacity-0={!thumbhash && !complete}
   draggable="false"
-  use:imageLoad
-  on:image-load|once={() => (complete = true)}
 />
 
 {#if hidden}
diff --git a/web/src/lib/components/shared-components/user-avatar.svelte b/web/src/lib/components/shared-components/user-avatar.svelte
index a77a5f2bb1..79937d02fc 100644
--- a/web/src/lib/components/shared-components/user-avatar.svelte
+++ b/web/src/lib/components/shared-components/user-avatar.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <script lang="ts">
-  import { imageLoad } from '$lib/utils/image-load';
+  import { onMount, tick } from 'svelte';
   import { UserAvatarColor, api } from '@api';
 
   interface User {
@@ -22,8 +22,19 @@
   export let showTitle = true;
   export let showProfileImage = true;
 
+  let img: HTMLImageElement;
   let showFallback = true;
 
+  onMount(async () => {
+    if (!user.profileImagePath) {
+      return;
+    }
+
+    await img.decode();
+    await tick();
+    showFallback = false;
+  });
+
   const colorClasses: Record<UserAvatarColor, string> = {
     primary: 'bg-immich-primary dark:bg-immich-dark-primary text-immich-dark-fg dark:text-immich-fg',
     pink: 'bg-pink-400 text-immich-bg',
@@ -62,13 +73,12 @@
 >
   {#if showProfileImage && user.profileImagePath}
     <img
+      bind:this={img}
       src={api.getProfileImageUrl(user.id)}
       alt="Profile image of {title}"
       class="h-full w-full object-cover"
       class:hidden={showFallback}
       draggable="false"
-      use:imageLoad
-      on:image-load={() => (showFallback = false)}
     />
   {/if}
   {#if showFallback}
diff --git a/web/src/lib/utils/image-load.ts b/web/src/lib/utils/image-load.ts
deleted file mode 100644
index d8e35223b9..0000000000
--- a/web/src/lib/utils/image-load.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { tick } from 'svelte';
-import type { ActionReturn } from 'svelte/action';
-
-interface Attributes {
-  'on:image-error'?: (e: CustomEvent) => void;
-  'on:image-load'?: (e: CustomEvent) => void;
-}
-
-export function imageLoad(img: HTMLImageElement): ActionReturn<void, Attributes> {
-  const onImageError = () => img.dispatchEvent(new CustomEvent('image-error'));
-  const onImageLoaded = () => img.dispatchEvent(new CustomEvent('image-load'));
-
-  if (img.complete) {
-    // Browser has fetched the image, naturalHeight is used to check
-    // if any loading errors have occurred.
-    const loadingError = img.naturalHeight === 0;
-
-    // Report status after a tick, to make sure event listeners are registered.
-    if (loadingError) {
-      tick().then(onImageError);
-    } else {
-      tick().then(onImageLoaded);
-    }
-
-    return {};
-  }
-
-  // Image has not been loaded yet, report status with event listeners.
-  img.addEventListener('load', onImageLoaded, { once: true });
-  img.addEventListener('error', onImageError, { once: true });
-
-  return {
-    destroy() {
-      img.removeEventListener('load', onImageLoaded);
-      img.removeEventListener('error', onImageError);
-    },
-  };
-}
diff --git a/web/src/routes/(user)/explore/+page.svelte b/web/src/routes/(user)/explore/+page.svelte
index 88da359242..1fb2df0011 100644
--- a/web/src/routes/(user)/explore/+page.svelte
+++ b/web/src/routes/(user)/explore/+page.svelte
@@ -80,7 +80,7 @@
         <p class="mb-4 font-medium dark:text-immich-dark-fg">Places</p>
       </div>
       <div class="flex flex-row flex-wrap gap-4">
-        {#each places as item}
+        {#each places as item (item.data.id)}
           <a class="relative" href="/search?{Field.CITY}={item.value}" draggable="false">
             <div
               class="flex w-[calc((100vw-(72px+5rem))/2)] max-w-[156px] justify-center overflow-hidden rounded-xl brightness-75 filter"