feat: Loading indicator for panels 2

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;

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;
+  align-items: center;
+
+  &__loader-indicator {
+    padding: var(--space-3) 0;
+  }
+}
+</style>

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;
   }
 

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,15 @@ import AccountDetailsPanel from '@/components/AccountDetailsPanel'
 import { accountHints } from '@/utils/hints/accountHints'
 import { isDesktop } from '@/utils/screen'
 
+const nuxtApp = useNuxtApp()
+const isLoading = ref(true)
+nuxtApp.hook('page:start', () => {
+  isLoading.value = true
+})
+nuxtApp.hook('page:finish', () => {
+  isLoading.value = false
+})
+
 const accountStore = useAccountStore()
 const { accountDetails } = storeToRefs(accountStore)
 const { fetchAccount, fetchTotalAccountTransactionsCount } = accountStore

src/pages/contracts/index.vue

@@ -16,11 +16,21 @@
     </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 nuxtApp = useNuxtApp()
+const isLoading = ref(true)
+nuxtApp.hook('page:start', () => {
+  isLoading.value = true
+})
+nuxtApp.hook('page:finish', () => {
+  isLoading.value = false
+})
 </script>

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,15 @@ const { keyblockDetails } = storeToRefs(keyblockDetailsStore)
 const { fetchKeyblock } = keyblockDetailsStore
 const route = useRoute()
 
+const nuxtApp = useNuxtApp()
+const isLoading = ref(true)
+nuxtApp.hook('page:start', () => {
+  isLoading.value = true
+})
+nuxtApp.hook('page:finish', () => {
+  isLoading.value = false
+})
+
 const isKeyblockExistent = computed(() => keyblockDetails.value && !keyblockDetails.value.notExistent)
 
 await useAsyncData(async() => {

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,15 @@ const { microblockDetails } = storeToRefs(microblockDetailsStore)
 const { fetchMicroblock } = microblockDetailsStore
 const route = useRoute()
 
+const nuxtApp = useNuxtApp()
+const isLoading = ref(true)
+nuxtApp.hook('page:start', () => {
+  isLoading.value = true
+})
+nuxtApp.hook('page:finish', () => {
+  isLoading.value = false
+})
+
 await useAsyncData(async() => {
   await fetchMicroblock(route.params.id)
   return true

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,15 @@ const route = useRoute()
 const { replace } = useRouter()
 const hasCustomPanel = computed(() => name.value?.active && !!name.value?.customPointers?.length)
 
+const nuxtApp = useNuxtApp()
+const isLoading = ref(true)
+nuxtApp.hook('page:start', () => {
+  isLoading.value = true
+})
+nuxtApp.hook('page:finish', () => {
+  isLoading.value = false
+})
+
 try {
   await fetchName(route.params.name)
 } catch (error) {

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,15 @@ const activeTabIndex = computed({
   },
 })
 
+const nuxtApp = useNuxtApp()
+const isLoading = ref(true)
+nuxtApp.hook('page:start', () => {
+  isLoading.value = true
+})
+nuxtApp.hook('page:finish', () => {
+  isLoading.value = false
+})
+
 if (process.client) {
   const limit = isDesktop() ? null : 3
   fetchNamesDetails({ limit })

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,14 @@ const oracleDetailsStore = useOracleDetailsStore()
 const { oracleDetails } = storeToRefs(oracleDetailsStore)
 const { fetchOracleDetails } = oracleDetailsStore
 const route = useRoute()
-
+const nuxtApp = useNuxtApp()
+const isLoading = ref(true)
+nuxtApp.hook('page:start', () => {
+  isLoading.value = true
+})
+nuxtApp.hook('page:finish', () => {
+  isLoading.value = false
+})
 await useAsyncData(() => fetchOracleDetails(route.params.id))
 </script>
 

src/pages/oracles/index.vue

@@ -16,11 +16,21 @@
     </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 nuxtApp = useNuxtApp()
+const isLoading = ref(true)
+nuxtApp.hook('page:start', () => {
+  isLoading.value = true
+})
+nuxtApp.hook('page:finish', () => {
+  isLoading.value = false
+})
 </script>