fix(web): use native image decoder (#3074)

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

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>

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;
+  export let eyeColor: 'black' | 'white' = 'white';
+
   let complete = false;
+  let img: HTMLImageElement;
 
-  export let eyeColor: 'black' | 'white' = 'white';
+  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}

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}

web/src/lib/utils/image-load.ts

@@ -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);
-    },
-  };
-}

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"