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"

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/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) {

src/components/PaginatedContent.vue

@@ -1,42 +1,48 @@
 <template>
   <div
-    v-if="entities"
     ref="paginatedContent"
     class="paginated-content">
-    <header class="paginated-content__header">
-      <div class="paginated-content__counter">
-        <span v-if="hasCounter">
-          <template v-if="totalCount > 0">
-            Displaying
-            <span class="paginated-content__highlighted">
-              {{ formatNullable(firstVisibleIndex) }}-{{ formatNullable(lastVisibleIndex) }}
-              of
-              {{ formatNullable(totalCount) }}
-            </span>
-            records
-          </template>
-          <template v-else>
-            Displaying
-            <span class="paginated-content__highlighted">0</span>
-            records
-          </template>
-        </span>
-      </div>
-      <slot name="header"/>
-    </header>
-    <slot v-if="!!entities?.data.length"/>
-    <blank-state
-      v-else
-      class="paginated-content__blank-state"/>
-
-    <app-pagination
-      v-if="hasPagination"
-      :is-prev-disabled="isPrevDisabled"
-      :is-next-disabled="isNextDisabled"
-      :prev-label="prevLabel"
-      :next-label="nextLabel"
-      @prev-clicked="handlePrevClicked"
-      @next-clicked="handleNextClicked"/>
+    <div
+      v-if="entities"
+      class="paginated-content__container">
+      <header class="paginated-content__header">
+        <div class="paginated-content__counter">
+          <span v-if="hasCounter">
+            <template v-if="totalCount > 0">
+              Displaying
+              <span class="paginated-content__highlighted">
+                {{ formatNullable(firstVisibleIndex) }}-{{ formatNullable(lastVisibleIndex) }}
+                of
+                {{ formatNullable(totalCount) }}
+              </span>
+              records
+            </template>
+            <template v-else>
+              Displaying
+              <span class="paginated-content__highlighted">0</span>
+              records
+            </template>
+          </span>
+        </div>
+        <slot name="header"/>
+      </header>
+      <slot v-if="!!entities?.data.length"/>
+      <blank-state
+        v-else
+        class="paginated-content__blank-state"/>
+
+      <app-pagination
+        v-if="hasPagination"
+        :is-prev-disabled="isPrevDisabled"
+        :is-next-disabled="isNextDisabled"
+        :prev-label="prevLabel"
+        :next-label="nextLabel"
+        @prev-clicked="handlePrevClicked"
+        @next-clicked="handleNextClicked"/>
+    </div>
+    <div v-else>
+      <spinner-loader class="paginated-content__spinner-loader"/>
+    </div>
   </div>
 </template>
 
@@ -72,15 +78,13 @@ const props = defineProps({
     },
   },
 })
-
 const emit = defineEmits([
   'prev-clicked',
   'next-clicked',
   'update:pageIndex',
 ])
 
 const pageIndex = props.pageIndex ? useVModel(props, 'pageIndex', emit) : ref(1)
-
 const firstVisibleIndex = computed(
   () => (pageIndex.value - 1) * props.limit + 1,
 )
@@ -109,26 +113,53 @@ const nextLabel = computed(() => {
 })
 
 const handlePrevClicked = () => {
+  setFixedContainerHeight()
   pageIndex.value--
   emit('prev-clicked')
-  scrollToPaginatedContent()
 }
 
 const handleNextClicked = () => {
+  setFixedContainerHeight()
   pageIndex.value++
   emit('next-clicked')
-  scrollToPaginatedContent()
 }
 
-const paginatedContent = ref()
+watch(
+  () => props.entities,
+  () => {
+    if (props.entities) {
+      // reset container height after new data is loaded
+      resetContainerHeight()
+    }
+  },
+)
+
+function setFixedContainerHeight() {
+  paginatedContent.value.style.height = `${paginatedContent.value.clientHeight}px`
+}
 
-function scrollToPaginatedContent() {
-  paginatedContent.value.scrollIntoView()
+function resetContainerHeight() {
+  paginatedContent.value.style.height = ''
 }
+
+const paginatedContent = ref()
+
+onMounted(() => {
+  window.addEventListener('resize', resetContainerHeight())
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', resetContainerHeight())
+})
+
 </script>
 
 <style scoped>
 .paginated-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
   &__header {
     display: flex;
     align-items: center;
@@ -145,6 +176,10 @@ function scrollToPaginatedContent() {
     }
   }
 
+  &__container {
+    width: 100%;
+  }
+
   &__counter {
     margin-bottom: var(--space-3);
     font-family: var(--font-monospaced);
@@ -162,5 +197,9 @@ function scrollToPaginatedContent() {
   &__blank-state {
     margin-top: var(--space-3);
   }
+
+  &__spinner-loader {
+    margin: var(--space-3) 0;
+  }
 }
 </style>

src/components/SpinnerLoader.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="spinner-loader">
+    <img
+      class="spinner-loader__image"
+      alt="loading"
+      src="@/assets/loader.svg"
+      height="47">
+    <div>Loading</div>
+  </div>
+</template>
+
+<style scoped>
+
+.spinner-loader {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-family: var(--font-monospaced);
+
+  &__image {
+    margin-bottom: var(--space-2);
+  }
+}
+</style>