From e2da962c4ecde0b9529b19aa7ffaa92b5cd0fc2f Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <75730405+AuroraHuang22@users.noreply.github.com>
Date: Mon, 14 Aug 2023 17:24:27 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20Lazy=20fetch=20recommendat?=
 =?UTF-8?q?ion=20data=20(#1285)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/NFTPage/Recommendation.vue | 97 +++++++++++++----------
 src/pages/nft/class/_classId/index.vue    | 16 ++--
 2 files changed, 65 insertions(+), 48 deletions(-)

diff --git a/src/components/NFTPage/Recommendation.vue b/src/components/NFTPage/Recommendation.vue
index e0d6f4948..d48c29569 100644
--- a/src/components/NFTPage/Recommendation.vue
+++ b/src/components/NFTPage/Recommendation.vue
@@ -16,51 +16,60 @@
         {{ isFollowed ? $t('unfollow') : $t('follow') }}
       </ButtonV2>
     </div>
-
-    <div
-      v-if="recommendedList.length > 0"
-      class="relative mt-[24px]"
-    >
-      <Swiper
-        ref="recommendationSwiper"
-        :options="swiperOptions"
-        @slider-move="handleSliderMove"
-      >
-        <SwiperSlide
-          v-for="nft in recommendedList"
-          :key="nft.classId"
-          style="width: 310px; /* NOTE: Set width in style for auto slide per view calculation */"
+    <div class="flex justify-center items-center min-h-[375px]">
+      <div v-if="isLoading" class="flex items-center justify-center my-auto">
+        <ProgressIndicator />
+      </div>
+      <div v-else-if="recommendedList.length > 0" class="relative mt-[24px]">
+        <Swiper
+          ref="recommendationSwiper"
+          :options="swiperOptions"
+          @slider-move="handleSliderMove"
         >
-          <NFTPortfolioItem
-            class="shadow-lg mb-[12px] mx-auto"
-            :class-id="nft.classId"
-            :portfolio-wallet="iscnOwner"
-            :should-fetch-when-visible="true"
-            @click.native="handleItemClick(nft.classId)"
-            @collect="handleItemCollect(nft.classId)"
-          />
-        </SwiperSlide>
-      </Swiper>
+          <SwiperSlide
+            v-for="nft in recommendedList"
+            :key="nft.classId"
+            style="
+              width: 310px; /* NOTE: Set width in style for auto slide per view calculation */
+            "
+          >
+            <NFTPortfolioItem
+              class="shadow-lg mb-[12px] mx-auto"
+              :class-id="nft.classId"
+              :portfolio-wallet="iscnOwner"
+              :should-fetch-when-visible="true"
+              @click.native="handleItemClick(nft.classId)"
+              @collect="handleItemCollect(nft.classId)"
+            />
+          </SwiperSlide>
+        </Swiper>
 
-      <div class="absolute inset-0 pointer-events-none flex justify-between items-center z-10 px-[16px]">
-        <div class="absolute inset-y-0 left-0 w-[32px] bg-gradient-to-r from-like-green/25 to-like-green/0" />
-        <div class="absolute inset-y-0 right-0 w-[32px] bg-gradient-to-l from-like-green/25 to-like-green/0" />
-        <ButtonV2
-          class="relative pointer-events-auto shadow-lg"
-          preset="tertiary"
-          :circle="true"
-          @click="handleClickPrev"
-        >
-          <IconArrowLeft class="w-[20px]" />
-        </ButtonV2>
-        <ButtonV2
-          class="relative pointer-events-auto shadow-lg"
-          preset="tertiary"
-          :circle="true"
-          @click="handleClickNext"
+        <div
+          class="absolute inset-0 pointer-events-none flex justify-between items-center z-10 px-[16px]"
         >
-          <IconArrowLeft class="w-[20px] rotate-180" />
-        </ButtonV2>
+          <div
+            class="absolute inset-y-0 left-0 w-[32px] bg-gradient-to-r from-like-green/25 to-like-green/0"
+          />
+          <div
+            class="absolute inset-y-0 right-0 w-[32px] bg-gradient-to-l from-like-green/25 to-like-green/0"
+          />
+          <ButtonV2
+            class="relative shadow-lg pointer-events-auto"
+            preset="tertiary"
+            :circle="true"
+            @click="handleClickPrev"
+          >
+            <IconArrowLeft class="w-[20px]" />
+          </ButtonV2>
+          <ButtonV2
+            class="relative shadow-lg pointer-events-auto"
+            preset="tertiary"
+            :circle="true"
+            @click="handleClickNext"
+          >
+            <IconArrowLeft class="w-[20px] rotate-180" />
+          </ButtonV2>
+        </div>
       </div>
     </div>
   </section>
@@ -88,6 +97,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     swiperOptions() {
diff --git a/src/pages/nft/class/_classId/index.vue b/src/pages/nft/class/_classId/index.vue
index 7d8b97ecf..4ad81020d 100644
--- a/src/pages/nft/class/_classId/index.vue
+++ b/src/pages/nft/class/_classId/index.vue
@@ -222,14 +222,17 @@
           />
         </section>
         <!-- recommend -->
-        <div v-if="isRecommendationLoading" class="flex justify-center items-center my-[24px]">
-          <ProgressIndicator />
-        </div>
+        <client-only>
+          <lazy-component
+            class="pointer-events-none"
+            @show.once="handleFetchRecommendInfo"
+          />
+        </client-only>
         <NFTPageRecommendation
-          v-else
           :iscn-owner="iscnOwner"
           :is-followed="isFollowed"
           :recommended-list="recommendedList"
+          :is-loading="isRecommendationLoading"
           @header-avatar-click="handleRecommendationHeaderAvatarClick"
           @follow-button-click="handleFollowButtonClick"
           @item-click="handleRecommendedItemClick"
@@ -487,8 +490,6 @@ export default {
       this.isLoading = false;
     }
 
-    await this.fetchRecommendInfo();
-
     const { hash } = this.$route;
     if (hash) {
       this.$nextTick(() => {
@@ -528,6 +529,9 @@ export default {
       );
       await this.lazyGetUserInfoByAddresses(trimmedCollectors);
     },
+    async handleFetchRecommendInfo() {
+      await this.fetchRecommendInfo();
+    },
     async handleClickMoreCollector() {
       logTrackerEvent(
         this,