feat: Dashboard loading indicators 3 (#455)

aeternity · Aug 21, 2023 · 4e007a6 · 4e007a6
1 parent f5941dd
commit 4e007a6
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 3 deletions.
diff --git a/src/components/StatsPanel.vue b/src/components/StatsPanel.vue
@@ -1,5 +1,7 @@
 <template>
-  <app-panel class="stats-panel">
+  <app-panel
+    v-if="!isLoading"
+    class="stats-panel">
     <stats-tile
       class="stats-panel__stats-tile"
       title="TRANSACTIONS"
@@ -184,6 +186,10 @@
       </template>
     </stats-tile>
   </app-panel>
+
+  <loader-panel
+    v-else
+    class="stats-panel__loader-panel"/>
 </template>
 
 <script setup>
@@ -215,6 +221,11 @@ const {
   latestReward,
   latestBri,
 } = storeToRefs(useRecentBlocksStore())
+
+const isLoading = computed(() => {
+  return !(transactionsCount.value && latestBri.value && latestReward.value)
+})
+
 </script>
 
 <style scoped>
@@ -248,5 +259,19 @@ const {
   &__value {
     font-weight: 700;
   }
+
+  &__loader-panel {
+    height: 784px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-4);
+
+    @media (--desktop) {
+      /*hardcoded height to prevent content jumping*/
+      height: 264px;
+    }
+  }
 }
 </style>
diff --git a/src/pages/index.vue b/src/pages/index.vue
@@ -27,9 +27,12 @@
         </div>
       </div>
       <div class="dashboard__row">
-        <client-only>
+        <client-only v-if="!isLoading">
           <blockchain-panel/>
         </client-only>
+        <loader-panel
+          v-else
+          class="dashboard__loader-panel"/>
       </div>
 
       <div class="dashboard__row">
@@ -106,6 +109,8 @@ definePageMeta({
   layout: 'empty',
 })
 
+const isLoading = ref(true)
+
 await useAsyncData(() => Promise.all([
   fetchStateChannels(),
   fetchInAuctionNames(),
@@ -119,7 +124,9 @@ await useAsyncData(() => Promise.all([
   fetchSelectedMicroblocksInfo(),
   fetchTotalTransactionsCount(),
   fetchDeltaStats(),
-]), { server: false })
+]).then(() => {
+  isLoading.value = false
+}), { server: false })
 
 onBeforeMount(() => {
   isSubscribedToKeyblockDetails.value = true
@@ -188,5 +195,9 @@ onBeforeUnmount(() => {
     line-height: 20px;
     font-family: var(--font-monospaced);
   }
+
+  &__loader-panel {
+    width: 100%;
+  }
 }
 </style>