feat: Loading indicator for panels 2 (#441)

aeternity · Aug 10, 2023 · 7b883f8 · 7b883f8
1 parent 0ccbe21
commit 7b883f8
Show file tree

Hide file tree

Showing 19 changed files with 215 additions and 128 deletions.
diff --git a/src/components/SpinnerLoader.vue → src/components/LoaderIndicator.vue b/src/components/SpinnerLoader.vue → src/components/LoaderIndicator.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="spinner-loader">
+  <div class="loader-indicator">
     <img
-      class="spinner-loader__image"
+      class="loader-indicator__image"
       alt="loading"
       src="@/assets/loader.svg"
       height="47">
@@ -11,7 +11,7 @@
 
 <style scoped>
 
-.spinner-loader {
+.loader-indicator {
   display: flex;
   flex-direction: column;
   align-items: center;

diff --git a/src/components/LoaderPanel.vue b/src/components/LoaderPanel.vue
@@ -0,0 +1,17 @@
+<template>
+  <app-panel class="loader-panel">
+    <loader-indicator class="loader-panel__loader-indicator"/>
+  </app-panel>
+</template>
+
+<style scoped>
+.loader-panel {
+  display: flex;
+  justify-content: center;
+  padding: var(--space-4);
+
+  &__loader-indicator {
+    margin: var(--space-3) 0;
+  }
+}
+</style>
diff --git a/src/components/PaginatedContent.vue b/src/components/PaginatedContent.vue
@@ -44,7 +44,7 @@
         @next-clicked="handleNextClicked"/>
     </template>
     <div v-else>
-      <spinner-loader class="paginated-content__spinner-loader"/>
+      <loader-indicator class="paginated-content__loader-indicator"/>
     </div>
   </div>
 </template>
@@ -204,7 +204,7 @@ onBeforeUnmount(() => {
     width: 100%;
   }
 
-  &__spinner-loader {
+  &__loader-indicator {
     margin: var(--space-3) 0;
   }
 

diff --git a/src/composables/useLoading.js b/src/composables/useLoading.js
@@ -0,0 +1,12 @@
+export default function useLoading() {
+  const nuxtApp = useNuxtApp()
+  const isLoading = ref(true)
+
+  nuxtApp.hook('page:start', () => {
+    isLoading.value = true
+  })
+  nuxtApp.hook('page:finish', () => {
+    isLoading.value = false
+  })
+  return { isLoading }
+}
diff --git a/src/pages/accounts/[id].vue b/src/pages/accounts/[id].vue
@@ -10,21 +10,23 @@
       {{ accountHints.account }}
     </template>
   </page-header>
+  <template v-if="!isLoading">
+    <account-details-panel
+      v-if="accountDetails"
+      :account-details="accountDetails"/>
 
-  <account-details-panel
-    v-if="accountDetails"
-    :account-details="accountDetails"/>
-
-  <client-only>
-    <app-tabs v-if="isTabsVisible">
-      <app-tab title="Transactions">
-        <account-transactions-panel/>
-      </app-tab>
-      <app-tab title="AENS Names">
-        <account-names-panel/>
-      </app-tab>
-    </app-tabs>
-  </client-only>
+    <client-only>
+      <app-tabs v-if="isTabsVisible">
+        <app-tab title="Transactions">
+          <account-transactions-panel/>
+        </app-tab>
+        <app-tab title="AENS Names">
+          <account-names-panel/>
+        </app-tab>
+      </app-tabs>
+    </client-only>
+  </template>
+  <loader-panel v-else/>
 </template>
 
 <script setup>
@@ -40,6 +42,8 @@ import AccountDetailsPanel from '@/components/AccountDetailsPanel'
 import { accountHints } from '@/utils/hints/accountHints'
 import { isDesktop } from '@/utils/screen'
 
+const { isLoading } = useLoading()
+
 const accountStore = useAccountStore()
 const { accountDetails } = storeToRefs(accountStore)
 const { fetchAccount, fetchTotalAccountTransactionsCount } = accountStore

diff --git a/src/pages/contracts/[id].vue b/src/pages/contracts/[id].vue
@@ -15,20 +15,22 @@
       </app-link>
     </template>
   </page-header>
+  <template v-if="!isLoading">
+    <contract-details-panel
+      v-if="contractDetails"
+      class="contract-details__panel"
+      :contract-details="contractDetails"/>
 
-  <contract-details-panel
-    v-if="contractDetails"
-    class="contract-details__panel"
-    :contract-details="contractDetails"/>
-
-  <app-tabs v-if="contractDetails">
-    <app-tab title="Call Transactions">
-      <contract-call-transactions-panel/>
-    </app-tab>
-    <app-tab title="Events">
-      <contract-events-panel/>
-    </app-tab>
-  </app-tabs>
+    <app-tabs v-if="contractDetails">
+      <app-tab title="Call Transactions">
+        <contract-call-transactions-panel/>
+      </app-tab>
+      <app-tab title="Events">
+        <contract-events-panel/>
+      </app-tab>
+    </app-tabs>
+  </template>
+  <loader-panel v-else/>
 </template>
 
 <script setup>
@@ -48,6 +50,8 @@ const { contractDetails } = storeToRefs(contractDetailsStore)
 const { fetchContractDetails, fetchContractEvents } = contractDetailsStore
 const route = useRoute()
 
+const { isLoading } = useLoading()
+
 await useAsyncData(() => fetchContractDetails(route.params.id))
 
 if (process.client) {

diff --git a/src/pages/contracts/index.vue b/src/pages/contracts/index.vue
@@ -16,11 +16,14 @@
     </template>
   </page-header>
 
-  <contracts-panel/>
+  <contracts-panel v-if="!isLoading"/>
+  <loader-panel v-else/>
 </template>
 
 <script setup>
 import ContractsPanel from '@/components/ContractsPanel'
 import PageHeader from '@/components/PageHeader'
 import { contractsHints } from '@/utils/hints/contractsHints'
+
+const { isLoading } = useLoading()
 </script>
diff --git a/src/pages/keyblocks/[id].vue b/src/pages/keyblocks/[id].vue
@@ -10,15 +10,18 @@
     </template>
   </page-header>
 
-  <keyblock-details-panel
-    v-if="keyblockDetails"
-    :keyblock-details="keyblockDetails"/>
-
-  <app-tabs v-if="isKeyblockExistent">
-    <app-tab title="Microblocks">
-      <keyblock-microblocks-panel/>
-    </app-tab>
-  </app-tabs>
+  <template v-if="!isLoading">
+    <keyblock-details-panel
+      v-if="keyblockDetails"
+      :keyblock-details="keyblockDetails"/>
+
+    <app-tabs v-if="isKeyblockExistent">
+      <app-tab title="Microblocks">
+        <keyblock-microblocks-panel/>
+      </app-tab>
+    </app-tabs>
+  </template>
+  <loader-panel v-else/>
 </template>
 
 <script setup>
@@ -37,6 +40,8 @@ const { keyblockDetails } = storeToRefs(keyblockDetailsStore)
 const { fetchKeyblock } = keyblockDetailsStore
 const route = useRoute()
 
+const { isLoading } = useLoading()
+
 const isKeyblockExistent = computed(() => keyblockDetails.value && !keyblockDetails.value.notExistent)
 
 await useAsyncData(async() => {

diff --git a/src/pages/microblocks/[id].vue b/src/pages/microblocks/[id].vue
@@ -9,12 +9,14 @@
       {{ microblocksHints.microblock }}
     </template>
   </page-header>
+  <template v-if="!isLoading">
+    <microblock-details-panel
+      v-if="microblockDetails"
+      :microblock-details="microblockDetails"/>
 
-  <microblock-details-panel
-    v-if="microblockDetails"
-    :microblock-details="microblockDetails"/>
-
-  <microblock-transactions-panel/>
+    <microblock-transactions-panel/>
+  </template>
+  <loader-panel v-else/>
 </template>
 
 <script setup>
@@ -32,6 +34,8 @@ const { microblockDetails } = storeToRefs(microblockDetailsStore)
 const { fetchMicroblock } = microblockDetailsStore
 const route = useRoute()
 
+const { isLoading } = useLoading()
+
 await useAsyncData(async() => {
   await fetchMicroblock(route.params.id)
   return true

diff --git a/src/pages/names/[name].vue b/src/pages/names/[name].vue
@@ -16,21 +16,24 @@
     </template>
   </page-header>
 
-  <name-details-panel class="name-details__panel"/>
+  <template v-if="!isLoading">
+    <name-details-panel class="name-details__panel"/>
 
-  <name-pointers-special-panel
-    v-if="name?.active"
-    class="name-details__panel"/>
-  <name-pointers-custom-panel
-    v-if="hasCustomPanel"
-    class="name-details__panel"/>
-  <app-tabs
-    v-if="hasNameHistory"
-    class="name-details__tabs">
-    <app-tab title="History">
-      <name-history-panel class="name-details__history"/>
-    </app-tab>
-  </app-tabs>
+    <name-pointers-special-panel
+      v-if="name?.active"
+      class="name-details__panel"/>
+    <name-pointers-custom-panel
+      v-if="hasCustomPanel"
+      class="name-details__panel"/>
+    <app-tabs
+      v-if="hasNameHistory"
+      class="name-details__tabs">
+      <app-tab title="History">
+        <name-history-panel class="name-details__history"/>
+      </app-tab>
+    </app-tabs>
+  </template>
+  <loader-panel v-else/>
 </template>
 
 <script setup>
@@ -56,6 +59,8 @@ const route = useRoute()
 const { replace } = useRouter()
 const hasCustomPanel = computed(() => name.value?.active && !!name.value?.customPointers?.length)
 
+const { isLoading } = useLoading()
+
 try {
   await fetchName(route.params.name)
 } catch (error) {

diff --git a/src/pages/names/index.vue b/src/pages/names/index.vue
@@ -15,20 +15,22 @@
       </app-link>
     </template>
   </page-header>
-
-  <app-tabs
-    v-model="activeTabIndex"
-    class="names__tabs">
-    <app-tab title="Active">
-      <names-active-panel/>
-    </app-tab>
-    <app-tab title="In Auction">
-      <names-in-auction-panel/>
-    </app-tab>
-    <app-tab title="Expired">
-      <names-expired-panel/>
-    </app-tab>
-  </app-tabs>
+  <template v-if="!isLoading">
+    <app-tabs
+      v-model="activeTabIndex"
+      class="names__tabs">
+      <app-tab title="Active">
+        <names-active-panel/>
+      </app-tab>
+      <app-tab title="In Auction">
+        <names-in-auction-panel/>
+      </app-tab>
+      <app-tab title="Expired">
+        <names-expired-panel/>
+      </app-tab>
+    </app-tabs>
+  </template>
+  <loader-panel v-else/>
 </template>
 
 <script setup>
@@ -75,6 +77,8 @@ const activeTabIndex = computed({
   },
 })
 
+const { isLoading } = useLoading()
+
 if (process.client) {
   const limit = isDesktop() ? null : 3
   fetchNamesDetails({ limit })

diff --git a/src/pages/oracles/[id].vue b/src/pages/oracles/[id].vue
@@ -16,16 +16,19 @@
     </template>
   </page-header>
 
-  <oracle-details-panel
-    v-if="oracleDetails"
-    class="oracle-details__panel"
-    :oracle-details="oracleDetails"/>
-
-  <app-tabs>
-    <app-tab title="Events">
-      <oracle-events-panel/>
-    </app-tab>
-  </app-tabs>
+  <template v-if="!isLoading">
+    <oracle-details-panel
+      v-if="oracleDetails"
+      class="oracle-details__panel"
+      :oracle-details="oracleDetails"/>
+
+    <app-tabs>
+      <app-tab title="Events">
+        <oracle-events-panel/>
+      </app-tab>
+    </app-tabs>
+  </template>
+  <loader-panel v-else/>
 </template>
 
 <script setup>
@@ -40,7 +43,7 @@ const oracleDetailsStore = useOracleDetailsStore()
 const { oracleDetails } = storeToRefs(oracleDetailsStore)
 const { fetchOracleDetails } = oracleDetailsStore
 const route = useRoute()
-
+const { isLoading } = useLoading()
 await useAsyncData(() => fetchOracleDetails(route.params.id))
 </script>
 

diff --git a/src/pages/oracles/index.vue b/src/pages/oracles/index.vue
@@ -16,11 +16,14 @@
     </template>
   </page-header>
 
-  <oracles-panel/>
+  <oracles-panel v-if="!isLoading"/>
+  <loader-panel v-else/>
 </template>
 
 <script setup>
 import PageHeader from '@/components/PageHeader'
 import OraclesPanel from '@/components/OraclesPanel'
 import { oraclesHints } from '@/utils/hints/oraclesHints'
+
+const { isLoading } = useLoading()
 </script>