From 54d5eb5ae7d3bc6be0813d1c5d4f86d7e70eaadf Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Wed, 7 Aug 2024 18:30:46 +0500
Subject: [PATCH 1/2] fix(Drops.vue): `base` drops grid not loading

---
 components/drops/Drops.vue     | 6 ++++--
 components/drops/DropsGrid.vue | 8 +++++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/components/drops/Drops.vue b/components/drops/Drops.vue
index 1f55a9e598..46fd1145a8 100644
--- a/components/drops/Drops.vue
+++ b/components/drops/Drops.vue
@@ -36,7 +36,7 @@
       :drops="currentDrops"
       :loaded="loaded"
       :default-skeleton-count="DEFAULT_SKELETON_COUNT"
-      :async-skeleton-count="Math.round((count/2) - currentDrops.length)"
+      :async-skeleton-count="asyncSkeletonCountOf(currentDrops.length)"
       skeleton-key="current-drops-skeleton"
     />
 
@@ -56,7 +56,7 @@
       :drops="pastDrops"
       :loaded="loaded"
       :default-skeleton-count="DEFAULT_SKELETON_COUNT"
-      :async-skeleton-count="Math.round((count/2) - pastDrops.length)"
+      :async-skeleton-count="asyncSkeletonCountOf(pastDrops.length)"
       skeleton-key="skeleton"
     />
 
@@ -96,6 +96,8 @@ const pastDrops = computed(() =>
   filter(drops.value, { status: DropStatus.MINTING_ENDED }),
 )
 
+const asyncSkeletonCountOf = (amount: number) => count.value ? Math.max(0, Math.round((count.value) / 2) - amount) : DEFAULT_SKELETON_COUNT
+
 const checkRouteAvailability = () => {
   if (!dropsVisible(urlPrefix.value)) {
     navigateTo('/')
diff --git a/components/drops/DropsGrid.vue b/components/drops/DropsGrid.vue
index 9f3fbd2f72..ee1db181a0 100644
--- a/components/drops/DropsGrid.vue
+++ b/components/drops/DropsGrid.vue
@@ -5,7 +5,7 @@
     persist
   >
     <template
-      v-if="asyncSkeletonCount ? true : loaded"
+      v-if="isAsync ? true : loaded"
     >
       <div
         v-for="(drop, index) in drops"
@@ -23,7 +23,7 @@
     </template>
     <template v-if="!loaded">
       <DropsDropCardSkeleton
-        v-for="x in asyncSkeletonCount || defaultSkeletonCount"
+        v-for="x in isAsync ? asyncSkeletonCount : defaultSkeletonCount"
         :key="`${skeletonKey}-${x}`"
       />
     </template>
@@ -41,7 +41,7 @@ const GRID_DEFAULT_WIDTH = {
   large: 0,
 }
 
-defineProps<{
+const props = defineProps<{
   drops: Drop[] | InternalDropCalendar[]
   loaded: boolean
   defaultSkeletonCount: number
@@ -50,6 +50,8 @@ defineProps<{
   clickable?: boolean
 }>()
 
+const isAsync = computed(() => typeof props.asyncSkeletonCount === 'number')
+
 const isDrop = (item: Drop | InternalDropCalendar): item is Drop =>
   (item as Drop).collection !== undefined
 </script>

From a926fc74957b7fbe3e802dacddcdd9fbd7726f19 Mon Sep 17 00:00:00 2001
From: Hassnian <44554284+hassnian@users.noreply.github.com>
Date: Thu, 8 Aug 2024 09:28:53 +0500
Subject: [PATCH 2/2] Update components/drops/DropsGrid.vue

Co-authored-by: Jarsen <31397967+Jarsen136@users.noreply.github.com>
---
 components/drops/DropsGrid.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/drops/DropsGrid.vue b/components/drops/DropsGrid.vue
index ee1db181a0..e6fbdd4549 100644
--- a/components/drops/DropsGrid.vue
+++ b/components/drops/DropsGrid.vue
@@ -5,7 +5,7 @@
     persist
   >
     <template
-      v-if="isAsync ? true : loaded"
+      v-if="isAsync || loaded"
     >
       <div
         v-for="(drop, index) in drops"