feat: lazy load images (#1969)

components/common/CommonBlurhash.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
-import { decode } from 'blurhash'
+const { blurhash = '', src, srcset, shouldLoadImage = true } = defineProps<{
-
+  blurhash?: string
-const { blurhash, src, srcset, shouldLoadImage = true } = defineProps<{
-  blurhash?: string | null | undefined
   src: string
   srcset?: string
   shouldLoadImage?: boolean
@@ -11,44 +9,8 @@ const { blurhash, src, srcset, shouldLoadImage = true } = defineProps<{
 defineOptions({
   inheritAttrs: false,
 })
-
-const isLoaded = ref(false)
-const placeholderSrc = $computed(() => {
-  if (!blurhash)
-    return ''
-  const pixels = decode(blurhash, 32, 32)
-  return getDataUrlFromArr(pixels, 32, 32)
-})
-
-function loadImage() {
-  const img = document.createElement('img')
-
-  img.onload = () => {
-    isLoaded.value = true
-  }
-
-  img.src = src
-
-  if (srcset)
-    img.srcset = srcset
-
-  setTimeout(() => {
-    isLoaded.value = true
-  }, 3_000)
-}
-
-onMounted(() => {
-  if (shouldLoadImage)
-    loadImage()
-})
-
-watch(() => shouldLoadImage, () => {
-  if (shouldLoadImage)
-    loadImage()
-})
 </script>
 
 <template>
-  <img v-if="isLoaded || !placeholderSrc" v-bind="$attrs" :src="src" :srcset="srcset">
+  <UnLazyImage v-bind="$attrs" :blurhash="blurhash" :src="src" :src-set="srcset" :lazy-load="shouldLoadImage" auto-sizes />
-  <img v-else v-bind="$attrs" :src="placeholderSrc">
 </template>

components/status/StatusAttachment.vue

@@ -214,7 +214,7 @@ watch(shouldLoadAttachment, () => {
         @click="!shouldLoadAttachment ? loadAttachment() : openMediaPreview(attachments ? attachments : [attachment], attachments?.indexOf(attachment) || 0)"
       >
         <CommonBlurhash
-          :blurhash="attachment.blurhash"
+          :blurhash="attachment.blurhash || ''"
           class="status-attachment-image"
           :src="src"
           :srcset="srcset"

nuxt.config.ts

@@ -24,6 +24,7 @@ export default defineNuxtConfig({
     '@vue-macros/nuxt',
     '@nuxtjs/i18n',
     '@nuxtjs/color-mode',
+    '@unlazy/nuxt',
     'nuxt-vitest',
     ...(isDevelopment || isWindows) ? [] : ['nuxt-security'],
     '~/modules/emoji-mart-translation',
@@ -248,6 +249,9 @@ export default defineNuxtConfig({
   staleDep: {
     packageManager: 'pnpm',
   },
+  unlazy: {
+    ssr: false,
+  },
 })
 
 declare global {

package.json

@@ -112,6 +112,7 @@
     "@types/js-yaml": "^4.0.5",
     "@types/prettier": "^2.7.2",
     "@types/wicg-file-system-access": "^2020.9.6",
+    "@unlazy/nuxt": "^0.8.8",
     "bumpp": "^9.1.0",
     "consola": "^3.0.1",
     "eslint": "^8.38.0",

pnpm-lock.yaml

@@ -185,10 +185,10 @@ importers:
         version: 5.0.1
       tauri-plugin-log-api:
         specifier: github:tauri-apps/tauri-plugin-log
-        version: github.com/tauri-apps/tauri-plugin-log/36100c269e33ac91246b0a4bfadd18c1caee5296
+        version: github.com/tauri-apps/tauri-plugin-log/782a97aeb30cf0f54355d04e6026842fa420bd83
       tauri-plugin-store-api:
         specifier: github:tauri-apps/tauri-plugin-store
-        version: github.com/tauri-apps/tauri-plugin-store/df267506bf12de451762f3f4b7f929ebed1421c9
+        version: github.com/tauri-apps/tauri-plugin-store/f4ef29684e4a32eddf51befaae98a5e498df8574
       theme-vitesse:
         specifier: ^0.6.4
         version: 0.6.4
@@ -256,6 +256,9 @@ importers:
       '@types/wicg-file-system-access':
         specifier: ^2020.9.6
         version: 2020.9.6
+      '@unlazy/nuxt':
+        specifier: ^0.8.8
+        version: 0.8.8(fast-blurhash@1.1.2)(rollup@2.79.1)(thumbhash@0.1.1)
       bumpp:
         specifier: ^9.1.0
         version: 9.1.0
@@ -3859,6 +3862,26 @@ packages:
       unhead: 1.1.26
       vue: 3.2.45
 
+  /@unlazy/core@0.8.8:
+    resolution: {integrity: sha512-V1QBPCF9IN8PK4d9uxl3fcQEndmqu47kOH7Ai7/Lj98Nuobnjv8K9xJfXfwqGkPcYfVBcFKvnwA3Z41XWLcd0Q==}
+    dependencies:
+      fast-blurhash: 1.1.2
+      thumbhash: 0.1.1
+    dev: true
+
+  /@unlazy/nuxt@0.8.8(fast-blurhash@1.1.2)(rollup@2.79.1)(thumbhash@0.1.1):
+    resolution: {integrity: sha512-Osb6RHNGYLFHJ3Ib0XKpCwFLpodWUJWd5QA2kk4iR+vfU+3fIxXYFbcX3zG7sFLUIBN9n+NuNY2CuIAJV4BJqQ==}
+    dependencies:
+      '@nuxt/kit': 3.4.2(rollup@2.79.1)
+      defu: 6.1.2
+      unlazy: 0.8.8(fast-blurhash@1.1.2)(thumbhash@0.1.1)
+    transitivePeerDependencies:
+      - fast-blurhash
+      - rollup
+      - supports-color
+      - thumbhash
+    dev: true
+
   /@unocss/astro@0.51.4(rollup@2.79.1)(vite@4.3.1):
     resolution: {integrity: sha512-denp8/PHvzfN9azfTF72+ey6xpgUB4L4416FI4DfcfKPzRMo4KjIaHlTD6xuaJwBdC8UJSOIcDRXldRGPT33Ag==}
     dependencies:
@@ -7303,6 +7326,10 @@ packages:
       pathe: 1.1.0
       ufo: 1.1.1
 
+  /fast-blurhash@1.1.2:
+    resolution: {integrity: sha512-lJVOgYSlahqkRhrKumNx/SGB2F/qS0D1z7xjGYjb5EZJRtlzySGMniZjkQ9h9Rv8sPmM/V9orEgRiMwazDNH6A==}
+    dev: true
+
   /fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
@@ -12459,6 +12486,10 @@ packages:
   /through@2.3.8:
     resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
 
+  /thumbhash@0.1.1:
+    resolution: {integrity: sha512-kH5pKeIIBPQXAOni2AiY/Cu/NKdkFREdpH+TLdM0g6WA7RriCv0kPLgP731ady67MhTAqrVG/4mnEeibVuCJcg==}
+    dev: true
+
   /time-zone@1.0.0:
     resolution: {integrity: sha512-TIsDdtKo6+XrPtiTm1ssmMngN1sAhyKnTO2kunQWqNPWIVvCm15Wmw4SWInwTVgJ5u/Tr04+8Ei9TNcw4x4ONA==}
     engines: {node: '>=4'}
@@ -12930,6 +12961,17 @@ packages:
     resolution: {integrity: sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==}
     engines: {node: '>= 10.0.0'}
 
+  /unlazy@0.8.8(fast-blurhash@1.1.2)(thumbhash@0.1.1):
+    resolution: {integrity: sha512-7wro4wypXPr2WurVcuapEYwju9YXkJP9fHT2SgK5e0aegmuGL/M6wPaZNFQMzfMUCiFb5NODxW9lykq7ymOEog==}
+    peerDependencies:
+      fast-blurhash: ^1.1.2
+      thumbhash: ^0.1.1
+    dependencies:
+      '@unlazy/core': 0.8.8
+      fast-blurhash: 1.1.2
+      thumbhash: 0.1.1
+    dev: true
+
   /unocss@0.51.4(@unocss/webpack@0.51.4)(postcss@8.4.23)(rollup@2.79.1)(vite@4.3.1):
     resolution: {integrity: sha512-84kRoL29Rk0AKdeS2GGZ+YduW5F0S2on3cSxA2Hh1KlI4MN8Xvxa8+f4RfFS0U5iH4yoHohvcWThRgjDhOWSeg==}
     engines: {node: '>=14'}
@@ -14185,16 +14227,16 @@ packages:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
     dev: true
 
-  github.com/tauri-apps/tauri-plugin-log/36100c269e33ac91246b0a4bfadd18c1caee5296:
+  github.com/tauri-apps/tauri-plugin-log/782a97aeb30cf0f54355d04e6026842fa420bd83:
-    resolution: {tarball: https://codeload.github.com/tauri-apps/tauri-plugin-log/tar.gz/36100c269e33ac91246b0a4bfadd18c1caee5296}
+    resolution: {tarball: https://codeload.github.com/tauri-apps/tauri-plugin-log/tar.gz/782a97aeb30cf0f54355d04e6026842fa420bd83}
     name: tauri-plugin-log-api
     version: 0.0.0
     dependencies:
       '@tauri-apps/api': 1.2.0
     dev: false
 
-  github.com/tauri-apps/tauri-plugin-store/df267506bf12de451762f3f4b7f929ebed1421c9:
+  github.com/tauri-apps/tauri-plugin-store/f4ef29684e4a32eddf51befaae98a5e498df8574:
-    resolution: {tarball: https://codeload.github.com/tauri-apps/tauri-plugin-store/tar.gz/df267506bf12de451762f3f4b7f929ebed1421c9}
+    resolution: {tarball: https://codeload.github.com/tauri-apps/tauri-plugin-store/tar.gz/f4ef29684e4a32eddf51befaae98a5e498df8574}
     name: tauri-plugin-store-api
     version: 0.0.0
     dependencies: