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;
-  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}

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}