Merge pull request kodadot#10443 from hassnian/issue-10416

perf: collection/gallery explore  page images

components/base/MediaItem.vue

@@ -22,7 +22,8 @@
       :parent-hovering="isMediaItemHovering"
       :image-component="imageComponent"
       :preview="preview"
-      :autoplay="autoplay" />
+      :autoplay="autoplay"
+      :lazy-loading="lazyLoading" />
     <div
       v-if="isLewd && isLewdBlurredLayer"
       class="nsfw-blur flex capitalize items-center justify-center flex-col">
@@ -85,6 +86,7 @@ const props = withDefaults(
     preview?: boolean
     autoplay?: boolean
     // props for image component
+    lazyLoading?: boolean
     enableNormalTag?: boolean
     sizes?: string
     imageComponent?:
@@ -105,6 +107,7 @@ const props = withDefaults(
     audioPlayerCover: '',
     isFullscreen: false,
     imageComponent: 'img',
+    lazyLoading: false,
     enableNormalTag: false,
   },
 )

components/collection/CollectionCard.vue

@@ -6,12 +6,15 @@
       <BasicImage
         :src="image"
         :alt="collection.name"
+        :lazy="lazyLoading"
+        sizes="300px md:350px"
         custom-class="collection-card__image-wrapper" />
 
       <CollectionDetail
         :nfts="collection.nfts || []"
         :name="collection.name || ''"
-        :image="image" />
+        :image="image"
+        :lazy-loading="lazyLoading" />
     </nuxt-link>
 
     <template v-else>
@@ -24,34 +27,46 @@
 <script setup lang="ts">
 import { NeoSkeleton } from '@kodadot1/brick'
 import { CollectionWithMeta } from '@/components/rmrk/service/scheme'
+import type { TokenMetadata } from '@kodadot1/hyperdata'
+import CollectionDetail from './CollectionDetail.vue'
 import BasicImage from '@/components/shared/view/BasicImage.vue'
 import { processSingleMetadata } from '@/utils/cachingStrategy'
 import { sanitizeIpfsUrl } from '@/utils/ipfs'
-import CollectionDetail from './CollectionDetail.vue'
 
-import type { TokenMetadata } from '@kodadot1/hyperdata'
-
-const { urlPrefix } = usePrefix()
-const isLoadingMeta = ref(false)
-
-interface Props {
+const props = defineProps<{
   isLoading?: boolean
   collection?: CollectionWithMeta
-}
+  lazyLoading?: boolean
+}>()
 
-const props = defineProps<Props>()
+const isLoadingMeta = ref(false)
 const image = ref('')
 
-onMounted(async () => {
-  if (props.isLoading || !props.collection) {
-    return
-  }
+const { urlPrefix } = usePrefix()
 
+const getImageFromMetadata = async (collectionMetadata: string) => {
   isLoadingMeta.value = true
+
   const metadata = (await processSingleMetadata(
-    props.collection.metadata,
+    collectionMetadata,
   )) as TokenMetadata
+
   image.value = sanitizeIpfsUrl(getCollectionImage(metadata) || '')
   isLoadingMeta.value = false
+}
+
+onMounted(async () => {
+  if (props.isLoading || !props.collection) {
+    return
+  }
+
+  const meta = props.collection.meta
+  const metaImage = meta ? getCollectionImage(meta) : undefined
+
+  if (metaImage) {
+    image.value = sanitizeIpfsUrl(metaImage)
+  } else {
+    getImageFromMetadata(props.collection.metadata)
+  }
 })
 </script>

components/collection/CollectionDetail.vue

@@ -6,6 +6,8 @@
           v-if="!isLoading"
           :src="image"
           :alt="name"
+          :lazy="lazyLoading"
+          sizes="70px"
           custom-class="collection-card__image-wrapper-sub p-1" />
         <div
           v-else
@@ -66,6 +68,7 @@ const props = defineProps<{
   nfts: NFT[]
   name: string
   image?: string
+  lazyLoading?: boolean
 }>()
 
 const saleEvents = computed((): Interaction[] => {

components/collection/CollectionGrid.vue

@@ -7,14 +7,19 @@
     <DynamicGrid
       v-if="!isLoading && total"
       :id="scrollContainerId"
+      v-slot="{ cols }"
       grid-size="medium"
       :default-width="GRID_DEFAULT_WIDTH">
       <div
         v-for="(collection, index) in collections"
         :key="collection.id"
         :class="scrollItemClassName"
         :data-testid="`collection-index-${index}`">
-        <CollectionCard :collection="collection" />
+        <CollectionCard
+          :collection="collection"
+          :lazy-loading="
+            shouldLazyLoad({ index, cols, limit: first, skipRows: 3 })
+          " />
       </div>
     </DynamicGrid>
 

components/items/ItemsGrid/ItemsGrid.vue

@@ -25,6 +25,14 @@
           :display-name-with-sn="displayNameWithSn"
           :show-timestamp="showTimestamp"
           :collection-popover-hide="collectionPopoverHide"
+          :lazy-loading="
+            shouldLazyLoad({
+              cols: slotProps.cols,
+              index,
+              limit: first,
+              skipRows: EAGERLY_LOADED_ROWS,
+            })
+          "
           hide-video-controls
           :variant="
             slotProps.isMobileVariant || slotProps.grid === 'small'
@@ -38,6 +46,14 @@
           :hide-action="hideNFTHoverAction"
           :display-name-with-sn="displayNameWithSn"
           hide-video-controls
+          :lazy-loading="
+            shouldLazyLoad({
+              cols: slotProps.cols,
+              index,
+              limit: first,
+              skipRows: EAGERLY_LOADED_ROWS,
+            })
+          "
           :variant="
             slotProps.isMobileVariant || slotProps.grid === 'small'
               ? 'minimal'
@@ -97,6 +113,8 @@ import { NFT } from '@/components/rmrk/service/scheme'
 import { GridSection } from '@/stores/preferences'
 const slots = useSlots()
 
+const EAGERLY_LOADED_ROWS = 2
+
 const { listingCartEnabled } = useListingCartConfig()
 const listingCartStore = useListingCartStore()
 const route = useRoute()

components/items/ItemsGrid/ItemsGridImage.vue

@@ -10,6 +10,7 @@
     :display-name-with-sn="displayNameWithSn"
     :show-timestamp="showTimestamp"
     :collection-popover-hide="collectionPopoverHide"
+    :lazy-loading="lazyLoading"
     :class="{
       'in-cart-border':
         shoppingCartStore.isItemInCart(nft.id) ||
@@ -97,6 +98,7 @@ const props = defineProps<{
   displayNameWithSn?: boolean
   showTimestamp?: boolean
   collectionPopoverHide?: boolean
+  lazyLoading?: boolean
 }>()
 
 const { showCardIcon, cardIcon } = useNftCardIcon(computed(() => props.nft))

components/items/ItemsGrid/ItemsGridImageTokenEntity.vue

@@ -21,6 +21,7 @@
     bind-key="to"
     :media-player-cover="mediaPlayerCover"
     :media-static-video="hideVideoControls"
+    :lazy-loading="lazyLoading"
     media-hover-on-cover-play>
     <template v-if="!hideAction" #action>
       <div v-if="!isOwner && isAvailableToBuy" class="flex">
@@ -107,6 +108,7 @@ const props = defineProps<{
   hideAction?: boolean
   hideVideoControls?: boolean
   displayNameWithSn?: boolean
+  lazyLoading?: boolean
 }>()
 
 const {

components/profile/create/Modal.vue

@@ -131,7 +131,7 @@ const processProfile = async (profileData: ProfileFormData) => {
       ? getBioWithLinks(profileData.description)
       : profileData.description,
     image: imageUrl,
-    banner: hasProfile.value ? bannerUrl ?? null : bannerUrl!,
+    banner: hasProfile.value ? (bannerUrl ?? null) : bannerUrl!,
     socials: constructSocials(profileData),
     signature,
     message,

components/profile/create/stages/Form.vue

@@ -279,11 +279,11 @@ watchEffect(async () => {
 
   // Use Farcaster data if useFarcaster is true and data is available, otherwise fallback to profile data
   form.name = useFarcasterData
-    ? farcasterProfile.displayName ?? ''
-    : profile?.name ?? ''
+    ? (farcasterProfile.displayName ?? '')
+    : (profile?.name ?? '')
   form.description = useFarcasterData
-    ? farcasterProfile.bio ?? ''
-    : profile?.description ?? ''
+    ? (farcasterProfile.bio ?? '')
+    : (profile?.description ?? '')
   form.imagePreview = useFarcasterData
     ? farcasterProfile.pfpUrl
     : profile?.image

components/rmrk/service/scheme.ts

@@ -7,6 +7,7 @@ import { sanitizeIpfsUrl } from '@/utils/ipfs'
 import { ItemResources } from '@/composables/useNft'
 import { Attribute } from '@kodadot1/minimark/common'
 import type { Prefix } from '@kodadot1/static'
+import type { TokenMetadata } from '@kodadot1/hyperdata'
 
 export interface CompletePack extends BasePack {
   collections: Collection[]
@@ -63,6 +64,7 @@ export interface Metadata {
   thumbnailUri?: string
   mediaUri?: string
   chain?: Prefix
+  meta?: TokenMetadata
 }
 
 export interface NFTMetadata extends Metadata, ItemResources {

components/shared/DynamicGrid.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="container" :style="gridCols">
-    <slot :is-mobile-variant="isMobileVariant" :grid="grid" />
+    <slot :is-mobile-variant="isMobileVariant" :grid="grid" :cols="cols" />
   </div>
 </template>
 

components/shared/ProfileAvatar.vue

@@ -10,6 +10,7 @@
     <BaseMediaItem
       :src="profileImageUrl"
       :image-component="NuxtImg"
+      :sizes="`${size}px`"
       title="User Avatar"
       class="object-cover overflow-hidden rounded-full h-full w-full !shadow-none" />
   </div>

components/shared/nftCard/NftCard.vue

@@ -28,7 +28,8 @@
           disable-operation
           enable-normal-tag
           :audio-player-cover="mediaPlayerCover"
-          :audio-hover-on-cover-play="mediaHoverOnCoverPlay" />
+          :audio-hover-on-cover-play="mediaHoverOnCoverPlay"
+          :lazy-loading="lazyLoading" />
         <div
           :class="[showActionOnHover ? 'show-on-hover' : 'show-always']"
           class="w-full flex justify-center action-container">
@@ -116,6 +117,7 @@ const props = withDefaults(
     hideMediaInfo?: boolean
     linkTo?: string
     displayNameWithSn?: boolean
+    lazyLoading?: boolean
   }>(),
   {
     collectionPopoverShowDelay: 500,
@@ -128,6 +130,7 @@ const props = withDefaults(
     mediaPlayerCover: undefined,
     hideMediaInfo: false,
     linkTo: undefined,
+    lazyLoading: false,
   },
 )
 

components/shared/view/BasicImage.vue

@@ -1,11 +1,13 @@
 <template>
   <figure class="image-wrapper image is-1by1" :class="customClass">
     <transition name="fade">
-      <img
+      <NuxtImg
         v-if="imageSrc"
         :src="imageSrc || placeholder"
         :alt="alt"
         :class="['has-ratio', { 'rounded-full': rounded }]"
+        :sizes="sizes"
+        :loading="loading"
         @load="onImageLoad"
         @error="onImageError" />
     </transition>
@@ -20,36 +22,46 @@
 <script lang="ts" setup>
 import { NeoSkeleton } from '@kodadot1/brick'
 
-const { $consola } = useNuxtApp()
-const { placeholder } = useTheme()
 const props = withDefaults(
   defineProps<{
     src?: string
     alt?: string
     customClass?: string
     rounded?: boolean
+    sizes?: string
+    lazy?: boolean
   }>(),
   {
     src: '',
     alt: '',
     customClass: '',
+    sizes: '',
+    lazy: false,
   },
 )
 
-const imageSrc = ref(props.src)
+const { $consola } = useNuxtApp()
+const { placeholder } = useTheme()
 
-watchEffect(() => {
-  imageSrc.value = props.src
-})
+const imageSrc = ref(props.src)
 const loaded = ref(false)
 
+const loading = computed<'eager' | 'lazy'>(() =>
+  props.lazy ? 'lazy' : 'eager',
+)
+
 const onImageLoad = () => {
   loaded.value = true
 }
+
 const onImageError = (ev: Event) => {
   $consola.error('[BasicImage] to load:', props.src, ev)
   imageSrc.value = placeholder.value
 }
+
+watchEffect(() => {
+  imageSrc.value = props.src
+})
 </script>
 
 <style lang="scss" scoped>