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