Merge pull request kodadot#10771 from hassnian/issue-base-drops-grid-…

…breaks fix: base `/drops` grid not loading
hassnian · Aug 8, 2024 · 1cac116 · 1cac116
2 parents f460604 + 362168c
commit 1cac116
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git 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
@@ -5,7 +5,7 @@
     persist
   >
     <template
-      v-if="asyncSkeletonCount ? true : loaded"
+      v-if="isAsync || 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>