From 5d686a4456f70876d87852cdf0bfe6eb35332ff3 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Wed, 3 Jul 2024 11:56:37 +0500
Subject: [PATCH 1/2] add(GenerativePreview.vue): skeleton loader

---
 .../collection/drop/GenerativePreview.vue     | 19 +++++++++++++------
 locales/en.json                               |  3 ++-
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/components/collection/drop/GenerativePreview.vue b/components/collection/drop/GenerativePreview.vue
index 0bc4290bec..8cb08edde4 100644
--- a/components/collection/drop/GenerativePreview.vue
+++ b/components/collection/drop/GenerativePreview.vue
@@ -2,12 +2,19 @@
   <div
     data-partykit="generative-preview-card"
     class="border bg-background-color shadow-primary p-5 pb-6 w-full h-min md:w-[444px] lg:w-[490px] relative">
-    <BaseMediaItem
-      :src="sanitizeIpfsUrl(displayUrl)"
-      :mime-type="generativeImageUrl ? 'text/html' : ''"
-      preview
-      is-detail
-      class="border" />
+    <div class="relative">
+      <BaseMediaItem
+        :src="sanitizeIpfsUrl(displayUrl)"
+        :mime-type="generativeImageUrl ? 'text/html' : ''"
+        :class="{ 'opacity-0': !imageDataLoaded }"
+        class="border"
+        preview
+        is-detail />
+      <SkeletonLoader
+        v-if="!imageDataLoaded"
+        :title="$t('drops.loadingGenerativeArt')"
+        class="!absolute w-full top-0" />
+    </div>
 
     <NeoButton
       v-if="dropStore.isCapturingImage"
diff --git a/locales/en.json b/locales/en.json
index 67971f98c8..3376f9999d 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -1420,7 +1420,8 @@
     "phases": {
       "private": "Allowlist",
       "public": "Public Mint"
-    }
+    },
+    "loadingGenerativeArt": "Loading Generative Art"
   },
   "confirmPurchase": {
     "action": "Confirm Purchase",

From d862afb29cdf8f015f8434889a39ee0ac5ab5dc3 Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Wed, 3 Jul 2024 11:57:24 +0500
Subject: [PATCH 2/2] fix(SkeletonLoader.vue): handle undefined substitle case

---
 components/shared/SkeletonLoader.vue | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/components/shared/SkeletonLoader.vue b/components/shared/SkeletonLoader.vue
index 2a4904eda3..fd37952535 100644
--- a/components/shared/SkeletonLoader.vue
+++ b/components/shared/SkeletonLoader.vue
@@ -71,9 +71,13 @@ const calculateTextContainerWidth = () => {
 
   nextTick(() => {
     const title = titleRef.value?.clientWidth || 0
-    const subtitle =
-      (subtitleRef.value?.clientWidth || 0) + DOTS_PLUS_MARGIN_WIDTH
-    textContainerWidth.value = subtitle > title ? `${subtitle}px` : undefined
+    const substitle = subtitleRef.value?.clientWidth || 0
+    const subtitlePlusDots = substitle + DOTS_PLUS_MARGIN_WIDTH
+
+    textContainerWidth.value =
+      substitle && subtitlePlusDots > title
+        ? `${subtitlePlusDots}px`
+        : undefined
   })
 }