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

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com> Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
immich-app · Nov 29, 2023 · 6969002 · 6969002
1 parent e5d083f
commit 6969002
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 47 deletions.
diff --git 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
@@ -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}

diff --git 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
diff --git 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"