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 | null | undefined
+const { blurhash = '', src, srcset, shouldLoadImage = true } = defineProps<{
+  blurhash?: string
   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">
-  <img v-else v-bind="$attrs" :src="placeholderSrc">
+  <UnLazyImage v-bind="$attrs" :blurhash="blurhash" :src="src" :src-set="srcset" :lazy-load="shouldLoadImage" auto-sizes />
 </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",