From 8a0cc9d654a0453fdaeabef4382ca5ee19b3187a Mon Sep 17 00:00:00 2001
From: hassnian <hassnianxd@gmail.com>
Date: Wed, 2 Oct 2024 12:27:15 +0500
Subject: [PATCH] add(collection activity.): loading skeleton

---
 components/collection/activity/Activity.vue    | 18 +++++++++++++-----
 .../collection/activity/ActivityChart.vue      | 11 +++++++++++
 .../collection/activity/events/Events.vue      |  3 +++
 .../useCollectionActivity.ts                   | 17 ++++++++---------
 composables/useAsyncGraphql.ts                 |  9 ++++++---
 locales/en.json                                |  1 +
 6 files changed, 42 insertions(+), 17 deletions(-)

diff --git a/components/collection/activity/Activity.vue b/components/collection/activity/Activity.vue
index 356b026d6e..9dc62b91f3 100644
--- a/components/collection/activity/Activity.vue
+++ b/components/collection/activity/Activity.vue
@@ -10,7 +10,8 @@
           <div class="w-2/3 pr-2">
             <ActivityChart
               :events="events"
-              class="mt-2"
+              :loading="loading"
+              :class="{ 'mt-2': !loading }"
             />
           </div>
           <div class="flex-1">
@@ -29,7 +30,10 @@
             :flippers="flippers"
           />
           <div class="max-width">
-            <ActivityChart :events="events" />
+            <ActivityChart
+              :events="events"
+              :loading="loading"
+            />
           </div>
         </div>
       </div>
@@ -37,7 +41,10 @@
         class="mb-7"
         :class="{ 'my-7': !isBreadCrumbsShowing }"
       >
-      <Events :events="sortedEventsWithOffersDesc" />
+      <Events
+        :events="sortedEventsWithOffersDesc"
+        :loading="loading"
+      />
     </div>
   </div>
 </template>
@@ -63,8 +70,9 @@ const isBreadCrumbsShowing = computed(
   () => isAnyActivityFilterActive() && tablet.value,
 )
 
-const collectionId = computed(() => route.params.id)
-const { events, flippers, owners, offers } = useCollectionActivity({
+const collectionId = computed(() => route.params.id.toString())
+
+const { events, flippers, owners, offers, loading } = useCollectionActivity({
   collectionId,
 })
 
diff --git a/components/collection/activity/ActivityChart.vue b/components/collection/activity/ActivityChart.vue
index a92985b0a9..c5483d0dde 100644
--- a/components/collection/activity/ActivityChart.vue
+++ b/components/collection/activity/ActivityChart.vue
@@ -7,6 +7,15 @@
     chart-height="350px"
     data-testid="collection-activity-chart"
   />
+  <div
+    v-else-if="loading"
+    class="relative h-[350px]"
+  >
+    <SkeletonLoader
+      :title="$t('activity.generatingChart')"
+      class="absolute"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -29,9 +38,11 @@ const { decimals } = useChain()
 const props = withDefaults(
   defineProps<{
     events: ActivityInteraction[]
+    loading?: boolean
   }>(),
   {
     events: () => [],
+    loading: false,
   },
 )
 const hideOutliers = ref(true)
diff --git a/components/collection/activity/events/Events.vue b/components/collection/activity/events/Events.vue
index e8095604ed..9da11c5641 100644
--- a/components/collection/activity/events/Events.vue
+++ b/components/collection/activity/events/Events.vue
@@ -4,6 +4,7 @@
     :no-results-main="$t('activity.noResults')"
     :no-results-sub="$t('activity.noResultsSub')"
     :show-no-results="events.length > 0 && !displayedEvents.length"
+    :loading="loading"
     data-testid="nfts-event-table"
   >
     <template #columns>
@@ -62,9 +63,11 @@ import { toSubstrateAddress } from '@/services/profile'
 const props = withDefaults(
   defineProps<{
     events: (InteractionWithNFT | Offer)[]
+    loading: boolean
   }>(),
   {
     events: () => [],
+    loading: false,
   },
 )
 
diff --git a/composables/collectionActivity/useCollectionActivity.ts b/composables/collectionActivity/useCollectionActivity.ts
index 2b3df26171..49f2969cf3 100644
--- a/composables/collectionActivity/useCollectionActivity.ts
+++ b/composables/collectionActivity/useCollectionActivity.ts
@@ -26,22 +26,21 @@ export const useCollectionActivity = ({
     id: collectionId.value,
   }))
 
-  const { data: queryData, isLoading: loading } = useQuery({
+  const { data, isPending: loading } = useQuery({
     queryKey: ['collection-activity-events', prefix, variables],
-    queryFn: () =>
+    queryFn: async () =>
       collectionId.value
-        ? useGraphql({
-          queryPrefix,
-          queryName: 'collectionActivityEvents',
-          variables: variables.value,
-          clientName: prefix,
-        })
+        ? (await useAsyncGraphql({
+            query: 'collectionActivityEvents',
+            variables: variables.value,
+            prefix: queryPrefix,
+          })).data.value
         : null,
     staleTime: 1000 * 10,
   })
 
   watch(
-    computed(() => queryData.value?.data),
+    data,
     (result) => {
       if (result) {
         const nfts
diff --git a/composables/useAsyncGraphql.ts b/composables/useAsyncGraphql.ts
index 41143fabb3..e20e4c1f2a 100644
--- a/composables/useAsyncGraphql.ts
+++ b/composables/useAsyncGraphql.ts
@@ -4,12 +4,15 @@ type AyncQueryParams = {
   query: string
   variables: Record<string, unknown>
   clientId?: string
+  prefix?: string
 }
 
-export default async function ({ query, clientId, variables }: AyncQueryParams) {
+export default async function ({ query, variables, clientId, prefix }: AyncQueryParams) {
+  const { urlPrefix, client } = usePrefix()
+
   return useAsyncQuery({
-    query: (await resolveQueryPath(clientId || usePrefix().client.value, query)).default,
+    query: (await resolveQueryPath(prefix || urlPrefix.value, query)).default,
     variables: variables,
-    clientId: clientId,
+    clientId: clientId || client.value,
   })
 }
diff --git a/locales/en.json b/locales/en.json
index ec2eefb832..0fd11b81e2 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -38,6 +38,7 @@
     "floorPrice": "FLOOR PRICE",
     "followers": "Followers",
     "following": "Following",
+    "generatingChart": "Generating Chart",
     "hideOutliers": "Hide Outliers",
     "highestSale": "HIGHEST SALE",
     "items": "Items",