feat: Loading for tables

src/app.vue

@@ -65,10 +65,6 @@
 
   <the-header/>
   <NuxtLayout>
-    <NuxtLoadingIndicator
-      :duration="3000"
-      :throttle="300"
-      :color="false"/>
     <NuxtPage/>
   </NuxtLayout>
   <the-footer class="app__footer"/>
@@ -80,7 +76,7 @@ import TheHeader from '@/components/TheHeader'
 import TheFooter from '@/components/TheFooter'
 import { initializeStores } from '@/stores'
 import { useWebSocket } from '@/stores/webSocket'
-import { APP_CREATOR, APP_DESCRIPTION, APP_TITLE, APP_URL, APP_KEYWORDS } from '@/utils/constants'
+import { APP_CREATOR, APP_DESCRIPTION, APP_KEYWORDS, APP_TITLE, APP_URL } from '@/utils/constants'
 
 await useAsyncData(() => initializeStores())
 

src/components/AccountNamesPanel.vue

@@ -27,11 +27,12 @@ const accountStore = useAccountStore()
 const { fetchAccountNames } = accountStore
 const { accountNames } = storeToRefs(accountStore)
 
-function loadPrevAccountNames() {
-  fetchAccountNames({ queryParameters: accountNames.value.prev })
+async function loadPrevAccountNames() {
+  await fetchAccountNames({ queryParameters: accountNames.value.prev })
 }
-function loadNextAccountNames() {
-  fetchAccountNames({ queryParameters: accountNames.value.next })
+
+async function loadNextAccountNames() {
+  await fetchAccountNames({ queryParameters: accountNames.value.next })
 }
 </script>
 

src/components/ContractCallTransactionsPanel.vue

@@ -1,7 +1,5 @@
 <template>
-  <app-panel
-    v-if="contractCallTransactions"
-    class="contract-call-transactions-panel">
+  <app-panel class="contract-call-transactions-panel">
     <paginated-content
       v-model:page-index="pageIndex"
       :total-count="contractCallsCount"
@@ -35,7 +33,7 @@ const contractDetailsStore = useContractDetailsStore()
 const { contractCallTransactions, contractCallsCount } = storeToRefs(contractDetailsStore)
 const { fetchContractCallTransactions } = contractDetailsStore
 
-const limit = computed(() => isDesktop() ? 10 : 3)
+const limit = computed(() => process.client && isDesktop() ? 10 : 3)
 const pageIndex = ref(1)
 
 const loadPrevTransactions = () => {

src/components/ContractsPanel.vue

@@ -1,7 +1,5 @@
 <template>
-  <app-panel
-    v-if="contracts"
-    class="contracts-panel">
+  <app-panel class="contracts-panel">
     <paginated-content
       v-model:page-index="pageIndex"
       :entities="contracts"

src/components/KeyblockMicroblocksPanel.vue

@@ -1,7 +1,5 @@
 <template>
-  <app-panel
-    v-if="microblocks"
-    class="keyblock-microblock-panel">
+  <app-panel class="keyblock-microblock-panel">
     <paginated-content
       v-model:page-index="pageIndex"
       pagination-style="history"

src/components/MicroblockTransactionsPanel.vue

@@ -1,7 +1,5 @@
 <template>
-  <app-panel
-    v-if="transactions"
-    class="microblock-transactions-panel">
+  <app-panel class="microblock-transactions-panel">
     <paginated-content
       v-model:page-index="pageIndex"
       :entities="transactions"

src/components/OracleEventsPanel.vue

@@ -1,7 +1,6 @@
 <template>
   <app-panel class="oracle-events-panel">
     <paginated-content
-      v-if="oracleEvents"
       v-model:page-index="pageIndex"
       :entities="oracleEvents"
       pagination-style="history"
@@ -15,7 +14,6 @@
         :oracle-events="oracleEvents"
         class="oracle-events-panel__table-condensed"/>
     </paginated-content>
-    <data-failed-state v-else/>
   </app-panel>
 </template>
 
@@ -24,7 +22,6 @@ import { storeToRefs } from 'pinia'
 import { useOracleDetailsStore } from '@/stores/oracleDetails'
 import OracleEventsTable from '@/components/OracleEventsTable'
 import OracleEventsTableCondensed from '@/components/OracleEventsTableCondensed'
-import DataFailedState from '@/components/DataFailedState'
 
 const oracleDetailsStore = useOracleDetailsStore()
 const { oracleEvents } = storeToRefs(oracleDetailsStore)

src/components/OraclesPanel.vue

@@ -1,17 +1,14 @@
 <template>
   <app-panel class="oracles-panel">
     <paginated-content
-      v-if="oracles"
       :entities="oracles"
       :limit="limit"
       @prev-clicked="loadPrevOracles"
       @next-clicked="loadNextOracles">
       <oracles-table
-        v-if="oracles"
         class="oracles-panel__oracles-table"
         :oracles="oracles"/>
       <oracles-table-condensed
-        v-if="oracles"
         class="oracles-panel__oracles-table-condensed"
         :oracles="oracles"/>
     </paginated-content>
@@ -31,14 +28,14 @@ const oraclesStore = useOraclesStore()
 const { fetchOracles } = oraclesStore
 const { oracles } = storeToRefs(oraclesStore)
 
-const limit = computed(() => isDesktop() ? 10 : 3)
+const limit = computed(() => process.client && isDesktop() ? 10 : 3)
 
-async function loadPrevOracles() {
-  await fetchOracles({ queryParameters: oracles.value.prev })
+function loadPrevOracles() {
+  fetchOracles({ queryParameters: oracles.value.prev })
 }
 
-async function loadNextOracles() {
-  await fetchOracles({ queryParameters: oracles.value.next })
+function loadNextOracles() {
+  fetchOracles({ queryParameters: oracles.value.next })
 }
 
 if (process.client) {