feat: use web workers for placeholder hash calculation

(cherry picked from commit 1ef1ef1)

packages/core/src/blurhash.ts

@@ -1,7 +1,4 @@
-import { decodeBlurHash } from 'fast-blurhash'
 import { DEFAULT_PLACEHOLDER_SIZE } from './constants'
-import { getScaledDimensions } from './utils'
-import { rgbaToDataUri } from './utils/dataUri'
 
 export interface BlurHashOptions {
   /**
@@ -27,7 +24,16 @@ export function createPngDataUri(
     size = DEFAULT_PLACEHOLDER_SIZE,
   }: BlurHashOptions = {},
 ) {
-  const { width, height } = getScaledDimensions(ratio, size)
-  const rgba = decodeBlurHash(hash, width, height)
-  return rgbaToDataUri(width, height, rgba)
+  const worker = new Worker('./workers/blurhash-worker.ts')
+  worker.postMessage({
+    hash,
+    ratio,
+    size,
+  })
+
+  return new Promise<string>((resolve) => {
+    worker.onmessage = (event) => {
+      resolve(event.data)
+    }
+  })
 }

packages/core/src/lazyLoad.ts

@@ -39,14 +39,17 @@ export function lazyLoad<T extends HTMLImageElement>(
 
     // Generate the blurry placeholder from a Blurhash or ThumbHash string if applicable
     if (__ENABLE_HASH_DECODING__ && hash) {
-      const placeholder = createPlaceholderFromHash({
+      createPlaceholderFromHash({
         image,
         hash: typeof hash === 'string' ? hash : undefined,
         hashType,
         size: placeholderSize,
       })
-      if (placeholder)
-        image.src = placeholder
+        .then((placeholder) => {
+          if (!placeholder)
+            return
+          image.src = placeholder
+        })
     }
 
     // Bail if the image doesn't provide a `data-src` or `data-srcset` attribute
@@ -117,7 +120,7 @@ export function loadImage(
   })
 }
 
-export function createPlaceholderFromHash(
+export async function createPlaceholderFromHash(
   {
     /** If given, the hash will be extracted from the image's `data-blurhash` or `data-thumbhash` attribute and ratio will be calculated from the image's actual dimensions */
     image,
@@ -146,7 +149,7 @@ export function createPlaceholderFromHash(
 
   try {
     if (hashType === 'thumbhash') {
-      return createPngDataUriFromThumbHash(hash)
+      return await createPngDataUriFromThumbHash(hash)
     }
     else {
       // Preserve the original image's aspect ratio
@@ -155,7 +158,7 @@ export function createPlaceholderFromHash(
         const actualHeight = image.height || image.offsetHeight || size
         ratio = actualWidth / actualHeight
       }
-      return createPngDataUriFromBlurHash(hash, { ratio, size })
+      return await createPngDataUriFromBlurHash(hash, { ratio, size })
     }
   }
   catch (error) {

packages/core/src/thumbhash.ts

@@ -1,8 +1,10 @@
-import { thumbHashToRGBA } from 'thumbhash'
-import { base64ToBytes } from './utils'
-import { rgbaToDataUri } from './utils/dataUri'
-
 export function createPngDataUri(hash: string) {
-  const { w, h, rgba } = thumbHashToRGBA(base64ToBytes(hash))
-  return rgbaToDataUri(w, h, rgba)
+  const worker = new Worker('./workers/thumbhash-worker.ts')
+  worker.postMessage({ hash })
+
+  return new Promise<string>((resolve) => {
+    worker.onmessage = (event) => {
+      resolve(event.data)
+    }
+  })
 }

packages/core/src/workers/blurhash-worker.ts

@@ -0,0 +1,19 @@
+import { decodeBlurHash } from 'fast-blurhash'
+import { getScaledDimensions } from '../utils'
+import { rgbaToDataUri } from '../utils/dataUri'
+
+interface MessageEventData {
+  hash: string
+  ratio: number
+  size: number
+}
+
+onmessage = (event: MessageEvent<MessageEventData>) => {
+  const { hash, ratio, size } = event.data
+
+  const { width, height } = getScaledDimensions(ratio, size)
+  const rgba = decodeBlurHash(hash, width, height)
+  const dataURL = rgbaToDataUri(width, height, rgba)
+
+  postMessage(dataURL)
+}

packages/core/src/workers/thumbhash-worker.ts

@@ -0,0 +1,16 @@
+import { thumbHashToRGBA } from 'thumbhash'
+import { base64ToBytes } from '../utils'
+import { rgbaToDataUri } from '../utils/dataUri'
+
+interface MessageEventData {
+  hash: string
+}
+
+onmessage = (event: MessageEvent<MessageEventData>) => {
+  const { hash } = event.data
+
+  const { w, h, rgba } = thumbHashToRGBA(base64ToBytes(hash))
+  const dataURL = rgbaToDataUri(w, h, rgba)
+
+  postMessage(dataURL)
+}