[TAS-2320] 🚸 Add loading placeholder for <itemCard/>

src/components/NFTBook/ItemCard.vue

@@ -225,13 +225,18 @@
       v-if="!isCompactPreset && !isDetailsPreset"
       class="flex justify-between px-[8px] sm:px-[24px] mt-[20px]"
     >
-      <div v-if="nftBookAvailablePriceLabel">
-        <Label
-          preset="p5"
-          class="text-like-green-dark"
-          :text="nftBookAvailablePriceLabel"
-        />
-      </div>
+      <Label
+        v-if="isLoading"
+        preset="p5"
+        class="text-medium-gray"
+        :text="$t('nft_details_page_label_item_loading')"
+      />
+      <Label
+        v-else-if="nftBookAvailablePriceLabel"
+        preset="p5"
+        class="text-like-green-dark"
+        :text="nftBookAvailablePriceLabel"
+      />
       <Label
         v-else
         preset="p5"
@@ -308,6 +313,11 @@ export default {
       default: '',
     },
   },
+  data() {
+    return {
+      isLoading: false,
+    };
+  },
   computed: {
     creatorDisplayName() {
       return (
@@ -424,7 +434,12 @@ export default {
   },
   methods: {
     async fetchInfo() {
-      await this.lazyFetchNFTClassAggregatedData();
+      this.isLoading = true;
+      try {
+        await this.lazyFetchNFTClassAggregatedData();
+      } finally {
+        this.isLoading = false;
+      }
     },
     onClickAvatar() {
       this.$emit('click-avatar', this.iscnOwner);

src/components/NFTBook/ItemCardV2.vue

@@ -31,7 +31,7 @@
     </div>
 
     <div class="mt-[16px] text-[#1F1F1F] text-[0.875rem] laptop:text-[1rem]">
-      {{ productAvailablePriceLabel || $t('nft_details_page_label_sold_out') }}
+      {{ priceLabel }}
     </div>
   </div>
 </template>
@@ -68,6 +68,11 @@ export default {
       default: true,
     },
   },
+  data() {
+    return {
+      isLoading: false,
+    };
+  },
   computed: {
     classId() {
       return this.itemId.startsWith('likenft1') ? this.itemId : '';
@@ -81,16 +86,28 @@ export default {
         this.productOwner
       );
     },
+    priceLabel() {
+      if (this.isLoading) return this.$t('nft_details_page_label_item_loading');
+      return (
+        this.productAvailablePriceLabel ||
+        this.$t('nft_details_page_label_sold_out')
+      );
+    },
   },
   mounted() {
     if (!this.isLazyLoaded) this.fetchInfo();
   },
   methods: {
     async fetchInfo() {
-      if (this.isCollection) {
-        await this.lazyFetchNFTCollectionInfo();
-      } else {
-        await this.lazyFetchNFTClassAggregatedData();
+      this.isLoading = true;
+      try {
+        if (this.isCollection) {
+          await this.lazyFetchNFTCollectionInfo();
+        } else {
+          await this.lazyFetchNFTClassAggregatedData();
+        }
+      } finally {
+        this.isLoading = false;
       }
     },
   },

src/components/NFTCollection/ItemCard.vue

@@ -160,13 +160,18 @@
       class="flex justify-between px-[8px] sm:px-[24px] mt-[20px]"
     >
       <template v-if="!isDetailsPreset">
-        <div v-if="collectionAvailablePriceLabel">
-          <Label
-            preset="p5"
-            class="text-like-green-dark"
-            :text="collectionAvailablePriceLabel"
-          />
-        </div>
+        <Label
+          v-if="isLoading"
+          preset="p5"
+          class="text-medium-gray"
+          :text="$t('nft_details_page_label_item_loading')"
+        />
+        <Label
+          v-else-if="collectionAvailablePriceLabel"
+          preset="p5"
+          class="text-like-green-dark"
+          :text="collectionAvailablePriceLabel"
+        />
         <Label
           v-else
           preset="p5"
@@ -232,6 +237,11 @@ export default {
       default: '',
     },
   },
+  data() {
+    return {
+      isLoading: false,
+    };
+  },
   computed: {
     ...mapGetters(['getIsHideNFTBookDownload']),
     creatorDisplayName() {
@@ -339,7 +349,12 @@ export default {
   },
   methods: {
     async fetchInfo() {
-      await this.lazyFetchNFTCollectionInfo();
+      try {
+        this.isLoading = true;
+        await this.lazyFetchNFTCollectionInfo();
+      } finally {
+        this.isLoading = false;
+      }
     },
     onClickAvatar() {
       this.$emit('click-avatar', this.collectionOwner);

src/locales/en.json

@@ -661,6 +661,7 @@
   "nft_details_page_label_ar_view_in_mobile": "Experience your NFT live",
   "nft_details_page_label_class_page": "View all events from this content",
   "nft_details_page_label_content_types": "FIle Types",
+  "nft_details_page_label_item_loading": "Loading...",
   "nft_details_page_label_loading": "Loading",
   "nft_details_page_label_memo": "Enter transfer message",
   "nft_details_page_label_nft_id": "NFT ID",

src/locales/zh-Hant.json

@@ -661,6 +661,7 @@
   "nft_details_page_label_ar_view_in_mobile": "將你的 NFT 帶到現實",
   "nft_details_page_label_class_page": "檢視此系列的其他事件",
   "nft_details_page_label_content_types": "檔案類型",
+  "nft_details_page_label_item_loading": "載入中...",
   "nft_details_page_label_loading": "進行中，請稍候⋯⋯",
   "nft_details_page_label_memo": "附加留言",
   "nft_details_page_label_nft_id": "NFT ID",