fix: lazy load extension icons

keiyoushi · Jan 22, 2024 · 7d7652f · 7d7652f
1 parent c02505e
commit 7d7652f
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -21,7 +21,8 @@
     "element-plus": "^2.5.2",
     "lodash.groupby": "^4.6.0",
     "markdown-it-shortcode-tag": "^1.1.0",
-    "unplugin-element-plus": "^0.8.0"
+    "unplugin-element-plus": "^0.8.0",
+    "v-lazy-image": "^2.1.1"
   },
   "devDependencies": {
     "@mdit/plugin-attrs": "^0.8.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/website/.vitepress/theme/components/Extensions/ExtensionItem.vue b/website/.vitepress/theme/components/Extensions/ExtensionItem.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, toRefs } from 'vue'
+import VLazyImage from 'v-lazy-image';
 import { GITHUB_EXTENSION_BASE } from '../../../config/constants';
-import type { Extension } from '../../queries/useExtensionsRepositoryQuery'
+import type { Extension } from '../../queries/useExtensionsRepositoryQuery';
 
 const props = defineProps<{ item: Extension }>()
 
@@ -14,7 +14,7 @@ const apkUrl = `${GITHUB_EXTENSION_BASE}/apk/${props.item.apk}`;
 <template>
   <div :id="pkgId" class="extension" tabindex="-1">
     <a :href="`#${pkgId}`" class="anchor" aria-hidden="true" @click.stop>#</a>
-    <img class="extension-icon" :src="iconUrl" loading="lazy" width="42" height="42">
+    <v-lazy-image class="extension-icon" width="42" height="42" :src="iconUrl" />
     <div class="extension-text">
       <div class="upper">
         {{ pkgName }}