diff --git a/src/app.vue b/src/app.vue
index dad15fe01..3f3246c3c 100644
--- a/src/app.vue
+++ b/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())
 
diff --git a/src/assets/loader.svg b/src/assets/loader.svg
new file mode 100644
index 000000000..007e9e57f
--- /dev/null
+++ b/src/assets/loader.svg
@@ -0,0 +1,71 @@
+<svg width="43" height="44" viewBox="0 0 43 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_11159_26702)">
+        <path class="path" d="M17.1806 4.62883L21.9395 1.97737L30.6145 6.75557L30.505 11.8754L17.1806 4.62883Z"
+              fill="#F5274E"/>
+        <path class="path" d="M34.6838 9.26129L39.4578 11.9212L39.4699 21.6538L34.786 24.1631L34.6838 9.26129Z"
+              fill="#F5274E"/>
+
+        <path class="path" d="M39.3301 26.1525V31.4554L30.7045 36.3164L26.1648 33.665L39.3301 26.1525Z" fill="#F5274E"/>
+        <path class="path" d="M26.2954 38.5815L21.5006 41.1722L12.8917 36.2839L13.0713 31.1659L26.2954 38.5815Z"
+              fill="#F5274E"/>
+        <path class="path" d="M8.98413 33.8637L4.21014 31.2038L4.19807 21.4712L8.88195 18.9619L8.98413 33.8637Z"
+              fill="#F5274E"/>
+        <path class="path" d="M4.32422 17.1834V11.8805L13.0512 7.01953L17.6444 9.67098L4.32422 17.1834Z"
+              fill="#F5274E"/>
+
+        <path d="M14.3154 16.8086L21.8274 12.5487L29.1845 16.8086L21.75 20.919L14.3154 16.8086Z" fill="#F5274E"/>
+        <path d="M23.0266 23.0905L30.5386 18.8306L30.5386 27.2756L23.0266 31.3861L23.0266 23.0905Z" fill="#F5274E"/>
+        <path d="M13.0295 27.3192L12.8919 18.912L20.5058 23.075L20.5087 31.4085L13.0295 27.3192Z" fill="#F5274E"/>
+    </g>
+    <defs>
+        <clipPath id="clip0_11159_26702">
+            <rect width="43" height="44" fill="white"/>
+        </clipPath>
+    </defs>
+
+    <style>
+        .path {
+        animation: lds-spinner 1.2s linear infinite;
+        }
+
+        .path:nth-child(1) {
+        opacity:0;
+        animation-delay: -1s;
+        }
+        .path:nth-child(2) {
+        opacity:0;
+        animation-delay: -0.8s;
+        }
+        .path:nth-child(3) {
+        opacity:0;
+        animation-delay: -0.6s;
+        }
+        .path:nth-child(4) {
+        opacity:0;
+        animation-delay: -0.4s;
+        }
+        .path:nth-child(5) {
+        opacity:0;
+        animation-delay: -0.2s;
+        }
+        .path:nth-child(6) {
+        opacity:0;
+
+        }
+
+        @keyframes lds-spinner {
+        0% {
+        opacity: 1;
+        }
+        50% {
+        opacity: 0.9;
+        }
+        100% {
+        opacity: 0;
+        }
+        }
+
+    </style>
+</svg>
+
+
diff --git a/src/components/AccountNamesPanel.vue b/src/components/AccountNamesPanel.vue
index 4d79bb9b3..d1db58b16 100644
--- a/src/components/AccountNamesPanel.vue
+++ b/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>
 
diff --git a/src/components/ContractCallTransactionsPanel.vue b/src/components/ContractCallTransactionsPanel.vue
index 433adce3e..b465c56a2 100644
--- a/src/components/ContractCallTransactionsPanel.vue
+++ b/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 = () => {
diff --git a/src/components/ContractsPanel.vue b/src/components/ContractsPanel.vue
index e295232b5..a965e0e8f 100644
--- a/src/components/ContractsPanel.vue
+++ b/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"
diff --git a/src/components/KeyblockMicroblocksPanel.vue b/src/components/KeyblockMicroblocksPanel.vue
index e483cd382..6b5e17528 100644
--- a/src/components/KeyblockMicroblocksPanel.vue
+++ b/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"
diff --git a/src/components/MicroblockTransactionsPanel.vue b/src/components/MicroblockTransactionsPanel.vue
index 380a7fa64..156350b92 100644
--- a/src/components/MicroblockTransactionsPanel.vue
+++ b/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"
diff --git a/src/components/OracleEventsPanel.vue b/src/components/OracleEventsPanel.vue
index 9264abf1a..a887023f8 100644
--- a/src/components/OracleEventsPanel.vue
+++ b/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)
diff --git a/src/components/OraclesPanel.vue b/src/components/OraclesPanel.vue
index ab8efcd0c..3e2c224dd 100644
--- a/src/components/OraclesPanel.vue
+++ b/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) {
diff --git a/src/components/PaginatedContent.vue b/src/components/PaginatedContent.vue
index 2876fe167..5002837d8 100644
--- a/src/components/PaginatedContent.vue
+++ b/src/components/PaginatedContent.vue
@@ -1,42 +1,51 @@
 <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>
+    <template v-if="entities">
+      <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>
+      <div
+        v-if="!!entities?.data.length"
+        class="paginated-content__container">
+        <slot/>
       </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"/>
+      <blank-state
+        v-else
+        class="paginated-content__blank-state"/>
+
+      <app-pagination
+        v-if="hasPagination"
+        class="paginated-content__pagination"
+        :is-prev-disabled="isPrevDisabled"
+        :is-next-disabled="isNextDisabled"
+        :prev-label="prevLabel"
+        :next-label="nextLabel"
+        @prev-clicked="handlePrevClicked"
+        @next-clicked="handleNextClicked"/>
+    </template>
+    <div v-else>
+      <spinner-loader class="paginated-content__spinner-loader"/>
+    </div>
   </div>
 </template>
 
@@ -72,7 +81,6 @@ const props = defineProps({
     },
   },
 })
-
 const emit = defineEmits([
   'prev-clicked',
   'next-clicked',
@@ -80,7 +88,6 @@ const emit = defineEmits([
 ])
 
 const pageIndex = props.pageIndex ? useVModel(props, 'pageIndex', emit) : ref(1)
-
 const firstVisibleIndex = computed(
   () => (pageIndex.value - 1) * props.limit + 1,
 )
@@ -109,30 +116,59 @@ 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 scrollToPaginatedContent() {
-  paginatedContent.value.scrollIntoView()
+function setFixedContainerHeight() {
+  paginatedContent.value.style.height = `${paginatedContent.value.clientHeight}px`
 }
+
+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;
+  flex-direction: column;
+
   &__header {
     display: flex;
     align-items: center;
     flex-direction: column;
+    width: 100%;
 
     @media (--desktop) {
       justify-content: space-between;
@@ -145,6 +181,10 @@ function scrollToPaginatedContent() {
     }
   }
 
+  &__container {
+    width: 100%;
+  }
+
   &__counter {
     margin-bottom: var(--space-3);
     font-family: var(--font-monospaced);
@@ -161,6 +201,15 @@ function scrollToPaginatedContent() {
 
   &__blank-state {
     margin-top: var(--space-3);
+    width: 100%;
+  }
+
+  &__spinner-loader {
+    margin: var(--space-3) 0;
+  }
+
+  &__pagination {
+    width: 100%;
   }
 }
 </style>
diff --git a/src/components/SpinnerLoader.vue b/src/components/SpinnerLoader.vue
new file mode 100644
index 000000000..5b400d9ad
--- /dev/null
+++ b/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>
diff --git a/src/components/StateChannelsPanel.vue b/src/components/StateChannelsPanel.vue
index 2ff727395..d248ea499 100644
--- a/src/components/StateChannelsPanel.vue
+++ b/src/components/StateChannelsPanel.vue
@@ -1,7 +1,5 @@
 <template>
-  <app-panel
-    v-if="stateChannels"
-    class="state-channels-panel">
+  <app-panel class="state-channels-panel">
     <paginated-content
       v-model:page-index="pageIndex"
       :entities="stateChannels"
@@ -35,23 +33,24 @@ const { fetchStateChannels, fetchStateChannelsCount } = stateChannelsStore
 const limit = computed(() => process.client && isDesktop() ? 10 : 3)
 const pageIndex = ref(1)
 
-const loadPrevStateChannels = () => {
-  fetchStateChannels({
+async function loadPrevStateChannels() {
+  await fetchStateChannels({
     queryParameters: stateChannels.value.prev,
   })
 }
-const loadNextStateChannels = () => {
-  fetchStateChannels({
+
+async function loadNextStateChannels() {
+  await fetchStateChannels({
     queryParameters: stateChannels.value.next,
   })
 }
 
-const loadStateChannels = () => {
-  fetchStateChannels({ limit: limit.value })
+async function loadStateChannels() {
+  await fetchStateChannels({ limit: limit.value })
   pageIndex.value = 1
 }
 
-fetchStateChannelsCount()
+await fetchStateChannelsCount()
 
 if (process.client) {
   loadStateChannels()
diff --git a/src/pages/microblocks/[id].vue b/src/pages/microblocks/[id].vue
index 7e1c3f11a..be86454ec 100644
--- a/src/pages/microblocks/[id].vue
+++ b/src/pages/microblocks/[id].vue
@@ -14,7 +14,7 @@
     v-if="microblockDetails"
     :microblock-details="microblockDetails"/>
 
-  <microblock-transactions-panel v-if="microblockDetails"/>
+  <microblock-transactions-panel/>
 </template>
 
 <script setup>
diff --git a/src/stores/accountDetails.js b/src/stores/accountDetails.js
index ce28e5ac1..65b8d2103 100644
--- a/src/stores/accountDetails.js
+++ b/src/stores/accountDetails.js
@@ -80,6 +80,7 @@ export const useAccountStore = defineStore('account', () => {
   }
 
   async function fetchAccountNames({ accountId, queryParameters, limit } = {}) {
+    rawAccountNames.value = null
     const defaultParameters = `/v2/names?owned_by=${accountId}&by=name&direction=forward&state=active&limit=${limit ?? 10}`
     const { data } = await axios.get(`${MIDDLEWARE_URL}${queryParameters || defaultParameters}`)
     rawAccountNames.value = data
diff --git a/src/stores/names.js b/src/stores/names.js
index a13859410..cd236e89f 100644
--- a/src/stores/names.js
+++ b/src/stores/names.js
@@ -44,6 +44,7 @@ export const useNamesStore = defineStore('names', () => {
   }
 
   async function fetchActiveNames({ queryParameters, limit } = {}) {
+    rawActiveNames.value = null
     const { data } = await axios.get(
       `${MIDDLEWARE_URL}${queryParameters || `/v2/names?state=active&expand=true&by=deactivation&direction=forward&limit=${limit ?? 10}`}`,
     )
@@ -51,6 +52,7 @@ export const useNamesStore = defineStore('names', () => {
   }
 
   async function fetchInAuctionNames({ queryParameters, limit } = {}) {
+    rawInAuctionNames.value = null
     const { data } = await axios.get(
       `${MIDDLEWARE_URL}${queryParameters || `/v2/names/auctions?by=expiration&direction=forward&limit=${limit ?? 10}`}`,
     )
@@ -58,6 +60,7 @@ export const useNamesStore = defineStore('names', () => {
   }
 
   async function fetchExpiredNames({ queryParameters, limit } = {}) {
+    rawExpiredNames.value = null
     const { data } = await axios.get(
       `${MIDDLEWARE_URL}${queryParameters || `/v2/names?state=inactive&expand=true&limit=${limit ?? 10}`}`,
     )
diff --git a/src/stores/oracles.js b/src/stores/oracles.js
index 9b292c85f..baa872205 100644
--- a/src/stores/oracles.js
+++ b/src/stores/oracles.js
@@ -18,6 +18,7 @@ export const useOraclesStore = defineStore('oracles', () => {
   })
 
   async function fetchOracles({ queryParameters, limit } = {}) {
+    rawOracles.value = null
     const defaultParameters = `/v2/oracles?direction=backward&limit=${limit || 10}`
     const { data } = await axios.get(
       `${MIDDLEWARE_URL}${queryParameters || defaultParameters}`,