From a6fd0ac6101257ae342a7329aa3c2107e5277f92 Mon Sep 17 00:00:00 2001
From: Eric Fennis <eric.fennis@gmail.com>
Date: Thu, 4 May 2023 09:52:02 +0200
Subject: [PATCH] try this to improve preformance

---
 .../home/HomeIconCustomizerIcons.vue          | 23 +++++++++++++------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/docs/.vitepress/theme/components/home/HomeIconCustomizerIcons.vue b/docs/.vitepress/theme/components/home/HomeIconCustomizerIcons.vue
index f2a654860..a92206161 100644
--- a/docs/.vitepress/theme/components/home/HomeIconCustomizerIcons.vue
+++ b/docs/.vitepress/theme/components/home/HomeIconCustomizerIcons.vue
@@ -2,20 +2,29 @@
 import { ref } from 'vue';
 import { data } from './HomeHeroIconsCard.data'
 import LucideIcon from '../base/LucideIcon.vue'
+import { vIntersectionObserver } from '@vueuse/components'
 
 const getInitialItems = () => data.icons.slice(0, 64)
 const items = ref(getInitialItems())
+const showIcons = ref(false)
 
+const onIntersectionObserver: IntersectionObserverCallback = ([{ isIntersecting }]) => {
+  if (isIntersecting) {
+    showIcons.value = true
+  }
+}
 </script>
 
 <template>
-  <div class="icon-grid">
-    <div
-      v-for="icon in items"
-      class="icon-grid-item"
-    >
-      <LucideIcon v-bind="icon" class="lucide-icon"/>
-    </div>
+  <div class="icon-grid" v-intersection-observer="onIntersectionObserver">
+    <template v-if="showIcons">
+      <div
+        v-for="icon in items"
+        class="icon-grid-item"
+        >
+        <LucideIcon v-bind="icon" class="lucide-icon"/>
+      </div>
+    </template>
   </div>
 </template>