🩹 Fix portfolio grid layout issues

src/components/NFTCover.vue

@@ -1,18 +1,18 @@
 <template>
   <div
-    class="bg-gray-9b"
+    class="relative bg-gray-9b"
     :style="rootStyle"
   >
     <img
-      v-if="src && !isError"
+      v-if="isShowImage"
       v-bind="imgProps"
       :src="resizedSrc"
       @load="handleImageLoad"
       @error="handleImageError"
     >
     <img
-      v-else
-      v-bind="imgProps"
+      v-if="!isShowImage || !isLoaded"
+      v-bind="imgPropsForPlaceholder"
       src="~/assets/images/nft/primitive-nft.png"
     >
   </div>
@@ -40,6 +40,7 @@ export default {
   data() {
     return {
       isError: false,
+      isLoaded: false,
     };
   },
   computed: {
@@ -49,27 +50,56 @@ export default {
       };
     },
     imgProps() {
+      const { imgPropsForPlaceholder: props, isLoaded } = this;
+      return {
+        ...props,
+        class: [
+          ...props.class,
+          {
+            'absolute inset-x-0 top-0 opacity-0 pointer-events-none': !isLoaded,
+          },
+        ],
+      };
+    },
+    imgPropsForPlaceholder() {
       return {
-        class: 'object-contain w-full',
+        class: [
+          'object-contain w-full',
+          {
+            'animate-pulse': !this.isLoaded,
+          },
+        ],
         loading: 'lazy',
         ...this.$attrs,
       };
     },
     resizedSrc() {
       return getLikeCoResizedImageUrl(this.src, this.size);
     },
+    isShowImage() {
+      return this.src && !this.isError;
+    },
   },
   watch: {
     src() {
       this.isError = false;
+      this.isLoaded = false;
     },
   },
   methods: {
     handleImageLoad(e) {
-      this.$emit('load', e);
+      this.isLoaded = true;
+      this.emitLoadEvent(e);
     },
-    handleImageError() {
+    handleImageError(e) {
       this.isError = true;
+      this.isLoaded = true;
+      this.emitLoadEvent(e);
+    },
+    emitLoadEvent(e) {
+      this.$nextTick(() => {
+        this.$emit('load', e);
+      });
     },
   },
 };

src/components/NFTPortfolio/Base.vue

@@ -8,6 +8,7 @@
         :src="imageSrc"
         :size="350"
         :bg-color="imageBgColor"
+        @load="handleCoverLoaded"
       />
       <div
         :class="[
@@ -150,6 +151,9 @@ export default {
     handleClickCollect(event) {
       this.$emit('collect', event);
     },
+    handleCoverLoaded(event) {
+      this.$emit('load-cover', event);
+    },
   },
 };
 </script>

src/components/NFTPortfolio/Item.vue

@@ -19,6 +19,7 @@
       :is-collecting="uiIsOpenCollectModal && isCollecting"
       :own-count="ownCount"
       @collect="handleClickCollect"
+      @load-cover="handleCoverLoaded"
     />
   </NuxtLink>
 </template>
@@ -95,6 +96,9 @@ export default {
         1
       );
     },
+    handleCoverLoaded(e) {
+      this.$emit('load-cover', e);
+    },
   },
 };
 </script>

src/components/NFTPortfolio/MainView.vue

@@ -98,7 +98,7 @@
             :class-id="nft.classId"
             :portfolio-wallet="portfolioWallet"
             :nft-id="nft.id"
-            @load="updatePortfolioGrid"
+            @load-cover="updatePortfolioGrid"
           />
         </li>
       </ul>