⚡️ lazy load NFTDetailsDropdown

floyd-li · Apr 12, 2023 · e0f1228 · e0f1228
1 parent 5308343
commit e0f1228
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 12 deletions.
diff --git a/components/collection/activity/ownerInsightsTabs/NFTSDetailsDropdown/Flipper.vue b/components/collection/activity/ownerInsightsTabs/NFTSDetailsDropdown/Flipper.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="ready" class="">
     <div
-      v-for="{ avatar, boughtPrice, soldPrice, profit, nft } in flips"
+      v-for="{ avatar, boughtPrice, soldPrice, profit, nft } in displayedFlips"
       :key="nft.id"
       class="is-flex py-2 px-5 is-justify-content-start is-hoverable-item is-flex-direction-column">
       <div class="is-flex">
@@ -11,8 +11,13 @@
           :alt="nft.name"
           width="40"
           height="40"
-          class="border mr-5" />
-        <img v-else src="/placeholder.webp" class="border mr-5" />
+          class="border mr-5 image-size" />
+        <img
+          v-else
+          src="/placeholder.webp"
+          class="border mr-5 image-size"
+          width="40"
+          height="40" />
         <span>{{ nft.name }}</span>
       </div>
       <div
@@ -41,6 +46,7 @@
         </div>
       </div>
     </div>
+    <div ref="target" />
   </div>
 </template>
 
@@ -59,10 +65,17 @@ const props = defineProps<{
 const flips = ref(props.flips)
 const ready = ref(false)
 
-onMounted(() => {
-  processNFTImages()
+const target = ref<HTMLElement | null>(null)
+const offset = ref(4)
+
+useIntersectionObserver(target, ([{ isIntersecting }]) => {
+  if (isIntersecting) {
+    offset.value += 4
+  }
 })
 
+const displayedFlips = computed(() => flips.value.slice(0, offset.value))
+
 const processNFTImages = async () => {
   if (props.flips) {
     const promises = props.flips.map(async ({ nft }, i) => {
@@ -82,4 +95,19 @@ const processNFTImages = async () => {
     ready.value = true
   }
 }
+
+watch(
+  offset,
+  () => {
+    processNFTImages()
+  },
+  { immediate: true }
+)
 </script>
+
+<style lang="scss" scoped>
+.image-size {
+  width: 40px !important;
+  height: 40px !important;
+}
+</style>
diff --git a/components/collection/activity/ownerInsightsTabs/NFTSDetailsDropdown/Holder.vue b/components/collection/activity/ownerInsightsTabs/NFTSDetailsDropdown/Holder.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="ready" class="">
     <div
-      v-for="{ avatar, id, name, updatedAt } in nfts"
+      v-for="{ avatar, id, name, updatedAt } in displayedNFTs"
       :key="id"
       class="is-flex pt-2 px-5 is-justify-content-start is-hoverable-item">
       <div class="mr-5">
@@ -11,8 +11,13 @@
           :alt="name"
           width="40"
           height="40"
-          class="border" />
-        <img v-else src="/placeholder.webp" class="border mr-5" />
+          class="border image-size" />
+        <img
+          v-else
+          src="/placeholder.webp"
+          class="border mr-5 image-size"
+          width="40"
+          height="40" />
       </div>
       <div class="is-flex is-flex-direction-column">
         {{ name }}
@@ -21,6 +26,7 @@
         }}</span>
       </div>
     </div>
+    <div ref="target" />
   </div>
 </template>
 
@@ -38,13 +44,20 @@ const props = defineProps<{
 const nfts = ref(props.nfts)
 const ready = ref(false)
 
-onMounted(() => {
-  processNFTImages()
+const target = ref<HTMLElement | null>(null)
+const offset = ref(4)
+
+useIntersectionObserver(target, ([{ isIntersecting }]) => {
+  if (isIntersecting) {
+    offset.value += 4
+  }
 })
 
+const displayedNFTs = computed(() => nfts.value.slice(0, offset.value))
+
 const processNFTImages = async () => {
   if (props.nfts) {
-    const promises = props.nfts.map(async (nft, i) => {
+    const promises = displayedNFTs.value.map(async (nft, i) => {
       let avatar
       if (nft.meta?.image) {
         avatar = sanitizeIpfsUrl(nft.meta.image)
@@ -53,12 +66,27 @@ const processNFTImages = async () => {
         avatar = sanitizeIpfsUrl(meta?.image)
       }
 
-      nfts.value[i].avatar = avatar
+      displayedNFTs.value[i].avatar = avatar
     })
 
     await Promise.all(promises)
 
     ready.value = true
   }
 }
+
+watch(
+  offset,
+  () => {
+    processNFTImages()
+  },
+  { immediate: true }
+)
 </script>
+
+<style lang="scss" scoped>
+.image-size {
+  width: 40px !important;
+  height: 40px !important;
+}
+</style>