feat: thumbhash (#177)

* feat: thumbhash

* fix: add some delay to fade

* fix: only render thumbnail once loaded

* fix: add thumbhash default

* fix: ultra smooth

* fix: thumbnail logo transition on chrome

* fix: display thumbnail when changing mod list page

* fix: restore thumbnail load event

---------

Co-authored-by: Mircea Roata <mircearoatapalade@gmail.com>

Author: Vilsol

.gitignore

@@ -302,7 +302,7 @@ $RECYCLE.BIN/
 /functions
 /.graphqlconfig
 /schema.graphql
-/graphql.schema.json
+/graphql.schema.*
 /.svelte-kit
 /.pnpm-store
 .direnv

bun.lockb

@@ -47,6 +47,7 @@
     "semver": "^7.6.3",
     "socket.io-client": "^4.7.5",
     "tslib": "^2.6.3",
+    "thumbhash": "^0.1.1",
     "wonka": "^6.3.4",
     "zod": "^3.23.8"
   },

package.json

@@ -8,6 +8,7 @@ query GetMods($offset: Int!, $limit: Int!, $search: String, $order: Order, $orde
       mod_reference
       name
       logo
+      logo_thumbhash
       views
       downloads
       short_description

src/gql/home/mods.graphql

@@ -1,16 +1,33 @@
 <script lang="ts">
   import { assets } from '$app/paths';
   import { goto, preloadData } from '$app/navigation';
+  import { thumbHashToDataURL } from 'thumbhash';
+  import { fade } from 'svelte/transition';
 
   export let name = '';
   export let logo = assets + '/images/no_image.webp';
   export let description = '';
   export let link = '/';
   export let fake = false;
+  export let thumbhash = '';
 
   $: renderedLogo = logo || assets + '/images/no_image.webp';
   $: renderedName = name || (fake && 'Card Name');
   $: renderedDescription = description || (fake && 'Short card description');
+  $: renderedThumbhash = thumbhash || '2/eFDQIsFmh9h4BreKeAeQqYBxd3d3J4Jw';
+  $: thumbHashData = (() => {
+    try {
+      return thumbHashToDataURL(
+        new Uint8Array(
+          atob(renderedThumbhash)
+            .split('')
+            .map((x) => x.charCodeAt(0))
+        )
+      );
+    } catch (e) {
+      console.error(e);
+    }
+  })();
 
   let preloaded = false;
   let timeoutHandle: number;
@@ -34,6 +51,19 @@
   };
 
   let actionButtons: HTMLElement;
+
+  let imageLoaded = false;
+  let thumbnailLoaded = false;
+
+  $: {
+    renderedLogo;
+    imageLoaded = false;
+  }
+
+  $: {
+    renderedThumbhash;
+    thumbnailLoaded = false;
+  }
 </script>
 
 <div
@@ -48,11 +78,31 @@
     class:font-flow={fake}
     class="grid-max-auto grid grid-cols-1 justify-items-center sm:grid-cols-2">
     <div class="card-image-container cursor-pointer">
-      <a href={link} on:keypress={() => goto(link)} tabindex="0">
+      <a
+        href={link}
+        on:keypress={() => goto(link)}
+        tabindex="0"
+        class="relative block max-h-full min-h-full min-w-full max-w-full">
         {#if fake}
           <div class="logo max-h-full min-h-full min-w-full max-w-full bg-neutral-500" />
         {:else}
-          <img src={renderedLogo} alt="{renderedName} Logo" class="logo max-h-full min-h-full min-w-full max-w-full" />
+          <img
+            class="logo absolute max-h-full min-h-full min-w-full max-w-full transition-opacity delay-100 duration-200 ease-linear"
+            class:invisible={!imageLoaded}
+            class:opacity-0={!imageLoaded}
+            src={renderedLogo}
+            alt="{renderedName} Logo"
+            on:load={() => (imageLoaded = true)} />
+          {#if !imageLoaded && thumbHashData}
+            <img
+              class="logo absolute max-h-full min-h-full min-w-full max-w-full"
+              class:invisible={!thumbnailLoaded}
+              src={thumbHashData}
+              alt="{renderedName} Logo"
+              on:load={() => (thumbnailLoaded = true)}
+              in:fade={{ duration: 200 }}
+              out:fade={{ duration: 200, delay: 100 }} />
+          {/if}
         {/if}
       </a>
     </div>

src/lib/components/general/FicsitCard.svelte

@@ -10,7 +10,16 @@
 
   export let mod: Pick<
     Mod,
-    'id' | 'mod_reference' | 'name' | 'logo' | 'views' | 'downloads' | 'short_description' | 'compatibility' | 'tags'
+    | 'id'
+    | 'mod_reference'
+    | 'name'
+    | 'logo'
+    | 'views'
+    | 'downloads'
+    | 'short_description'
+    | 'compatibility'
+    | 'tags'
+    | 'logo_thumbhash'
   > & {
     latestVersions: {
       alpha?: Maybe<Pick<Version, 'id'>>;
@@ -27,6 +36,7 @@
   name={mod.name}
   link={base + '/mod/' + mod.mod_reference}
   logo={mod.logo}
+  thumbhash={mod.logo_thumbhash}
   description={mod.short_description}>
   <div slot="stats" class="flex flex-row items-center gap-2">
     <span><span class="material-icons mr-1 align-middle text-sm">visibility</span>{prettyNumber(mod.views)}</span>