Merge pull request #10379 from hassnian/issue-10307

perf: improve drop first load speed

components/carousel/CarouselTypeRelated.vue

@@ -1,10 +1,8 @@
 <template>
   <div>
-    <div ref="target"></div>
-    <CarouselIndex
-      v-if="nfts && targetIsVisible"
-      :title="`${$t('nft.related')}`"
-      :nfts="nfts" />
+    <LoadLazily>
+      <CarouselIndex v-if="nfts" :title="`${$t('nft.related')}`" :nfts="nfts" />
+    </LoadLazily>
   </div>
 </template>
 
@@ -16,14 +14,4 @@ const props = defineProps<{
 }>()
 
 const { nfts } = await useCarouselRelated({ collectionId: props.collectionId })
-
-const target = ref(null)
-const targetIsVisible = ref(false)
-
-useIntersectionObserver(target, ([{ isIntersecting }]) => {
-  // set visible only once
-  if (!targetIsVisible.value && isIntersecting) {
-    targetIsVisible.value = isIntersecting
-  }
-})
 </script>

components/collection/drop/GenerativeLayout.vue

@@ -52,20 +52,22 @@
 
       <CollectionUnlockableItemInfo :collection-id="drop?.collection" />
 
-      <hr class="my-20" />
-
-      <LazyCollectionDropItemsGrid
-        v-if="drop?.collection"
-        class="mb-14"
-        :collection-id="drop?.collection" />
+      <hr ref="divider" class="my-20" />
+
+      <LoadLazily :target="divider">
+        <CollectionDropItemsGrid
+          v-if="drop?.collection"
+          class="mb-14"
+          :collection-id="drop?.collection" />
+      </LoadLazily>
     </div>
   </div>
 
-  <CollectionDropCursorParty
+  <LazyCollectionDropCursorParty
     :drop-alias="drop.alias"
     :user-minted-count="mintedAmountForCurrentUser" />
 
-  <CollectionDropPartyModal />
+  <LazyCollectionDropPartyModal />
 </template>
 
 <script setup lang="ts">
@@ -82,18 +84,22 @@ import { useWindowSize } from '@vueuse/core'
 import { useCollectionEntity } from '@/composables/drop/useGenerativeDropMint'
 import { DropItem } from '@/params/types'
 
+const mdBreakpoint = 768
+
+const emit = defineEmits(['mint'])
+
 const { drop } = useDrop()
 const { previewItem } = storeToRefs(useDropStore())
 const { mintedAmountForCurrentUser, description } = useCollectionEntity()
 const { width } = useWindowSize()
-const mdBreakpoint = 768
 
 const { emitEvent, completeLastEvent } = useCursorDropEvents()
 const { collection: collectionInfo } = useCollectionMinimal({
   collectionId: computed(() => drop.value?.collection ?? ''),
 })
 
-const emit = defineEmits(['mint'])
+const divider = ref()
+
 const address = computed(() => collectionInfo.value?.currentOwner)
 
 const { owners } = useCollectionActivity({

components/common/LoadLazily.vue

@@ -0,0 +1,22 @@
+<template>
+  <div v-if="!props.target" ref="target" />
+
+  <template v-if="targetIsVisible">
+    <slot />
+  </template>
+</template>
+<script lang="ts" setup>
+const props = withDefaults(
+  defineProps<{
+    target?: HTMLHtmlElement
+  }>(),
+  {
+    target: undefined,
+  },
+)
+
+const target = ref<HTMLHtmlElement>()
+const targetIsVisible = useOnceIsVisible(
+  computed(() => props.target || target.value),
+)
+</script>

composables/useOnceIsVisible.ts

@@ -0,0 +1,12 @@
+export default function (target: Ref<HTMLHtmlElement | undefined>) {
+  const targetIsVisible = ref(false)
+
+  useIntersectionObserver(target, ([{ isIntersecting }]) => {
+    // set visible only once
+    if (!targetIsVisible.value && isIntersecting) {
+      targetIsVisible.value = isIntersecting
+    }
+  })
+
+  return targetIsVisible
+}

pages/[prefix]/drops/[id].vue

@@ -21,8 +21,6 @@ const { drop, fetchDrop } = useDrop()
 
 const dropType = computed(() => drop.value.type)
 
-onMounted(() => fetchDrop().then(fixPrefix))
-
 onBeforeUnmount(reset)
 
 const fixPrefix = () => {
@@ -35,4 +33,6 @@ const fixPrefix = () => {
     redirectAfterChainChange(drop.value?.chain)
   }
 }
+
+fetchDrop().then(fixPrefix)
 </script>