Merge pull request #10990 from hassnian/issue-10647

feat: Add skeleton loader for followers in hover card
kodadot · Sep 17, 2024 · 2cf6a14 · 2cf6a14
2 parents 7ca2d09 + 449d300
commit 2cf6a14
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 8 deletions.
diff --git a/components/identity/module/IdentityPopoverFooter.vue b/components/identity/module/IdentityPopoverFooter.vue
@@ -1,7 +1,16 @@
 <template>
   <div class="flex flex-col gap-4">
     <div class="flex justify-between">
-      <div class="flex flex-row gap-1 items-center">
+      <div v-if="statsLoading">
+        <NeoSkeleton
+          width="100px"
+          no-margin
+        />
+      </div>
+      <div
+        v-else
+        class="flex flex-row gap-1 items-center"
+      >
         <p
           class="text-base"
           data-testid="identity-created"
@@ -14,7 +23,16 @@
         }}</span>
       </div>
 
-      <div class="flex flex-row gap-1 items-center">
+      <div v-if="followersLoading">
+        <NeoSkeleton
+          width="100px"
+          no-margin
+        />
+      </div>
+      <div
+        v-else
+        class="flex flex-row gap-1 items-center"
+      >
         <p
           class="text-base"
           data-testid="identity-followers"
@@ -76,21 +94,19 @@ const NFT_AMOUNT = 2
 const address = inject('address') as ComputedRef<string>
 
 const { urlPrefix } = usePrefix()
-const { totalCreated } = useIdentityStats({
+const { totalCreated, loading: statsLoading } = useIdentityStats({
   address,
 })
 
 const {
   data: followersData,
   refresh,
-  pending: loading,
+  pending: followersLoading,
 } = useAsyncData(`followers-${address.value}`, () =>
   fetchFollowersOf(address.value),
 )
 
-const followers = computed(() =>
-  loading.value ? 0 : followersData.value?.totalCount || 0,
-)
+const followers = computed(() => followersData.value?.totalCount || 0)
 
 const { data } = useSearchNfts({
   search: [

diff --git a/components/identity/utils/useIdentityStats.ts b/components/identity/utils/useIdentityStats.ts
@@ -66,7 +66,7 @@ export default function useIdentityStats({
   const firstMintDate = ref(new Date())
 
   const { lastBoughtDate } = useLastBought({ address })
-  const { data: stats } = useGraphql({
+  const { data: stats, loading } = useGraphql({
     queryName: 'userStatsByAccount',
     variables: {
       account: address.value,
@@ -113,5 +113,6 @@ export default function useIdentityStats({
     totalCreated,
     lastBought,
     startedMinting,
+    loading,
   }
 }