PW-51: Pending State for Wallet Page

package.json

@@ -19,6 +19,7 @@
     "axios": "^0.19.2",
     "core-js": "^3.6.4",
     "lodash": "^4.17.15",
+    "lottie-vuejs": "^0.4.0",
     "polkaswap-token-whitelist": "^1.0.0",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",

public/json/loader.json

@@ -0,0 +1 @@
+{"v":"5.7.4","fr":30,"ip":0,"op":181,"w":205,"h":205,"nm":"Comp 15","ddd":0,"assets":[{"id":"comp_0","layers":[{"ddd":0,"ind":1,"ty":0,"nm":"Pre-comp 5","refId":"comp_1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":270,"ix":10},"p":{"a":0,"k":[960,540,0],"ix":2,"l":2},"a":{"a":0,"k":[960,540,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"w":1920,"h":1080,"ip":0,"op":165.165165165165,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":0,"nm":"Pre-comp 5","refId":"comp_1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":180,"ix":10},"p":{"a":0,"k":[960,540,0],"ix":2,"l":2},"a":{"a":0,"k":[960,540,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"w":1920,"h":1080,"ip":0,"op":165.165165165165,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":0,"nm":"Pre-comp 5","refId":"comp_1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":90,"ix":10},"p":{"a":0,"k":[960,540,0],"ix":2,"l":2},"a":{"a":0,"k":[960,540,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"w":1920,"h":1080,"ip":0,"op":165.165165165165,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":0,"nm":"Pre-comp 5","refId":"comp_1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[960,540,0],"ix":2,"l":2},"a":{"a":0,"k":[960,540,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"w":1920,"h":1080,"ip":0,"op":165.165165165165,"st":0,"bm":0}]},{"id":"comp_1","layers":[{"ddd":0,"ind":1,"ty":0,"nm":"Pre-comp 3","refId":"comp_2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[960,540,0],"ix":2,"l":2},"a":{"a":0,"k":[960,540,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"w":1920,"h":1080,"ip":107.107107107107,"op":162.162162162162,"st":107.107107107107,"bm":0},{"ddd":0,"ind":2,"ty":0,"nm":"Pre-comp 3","refId":"comp_2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[960,540,0],"ix":2,"l":2},"a":{"a":0,"k":[960,540,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"w":1920,"h":1080,"ip":81.0810810810811,"op":136.136136136136,"st":81.0810810810811,"bm":0},{"ddd":0,"ind":3,"ty":0,"nm":"Pre-comp 3","refId":"comp_2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[960,540,0],"ix":2,"l":2},"a":{"a":0,"k":[960,540,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"w":1920,"h":1080,"ip":55.055055055055,"op":110.11011011011,"st":55.055055055055,"bm":0},{"ddd":0,"ind":4,"ty":0,"nm":"Pre-comp 3","refId":"comp_2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[960,540,0],"ix":2,"l":2},"a":{"a":0,"k":[960,540,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"w":1920,"h":1080,"ip":26.026026026026,"op":81.0810810810811,"st":26.026026026026,"bm":0},{"ddd":0,"ind":5,"ty":0,"nm":"Pre-comp 3","refId":"comp_2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[960,540,0],"ix":2,"l":2},"a":{"a":0,"k":[960,540,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"w":1920,"h":1080,"ip":0,"op":55.055055055055,"st":0,"bm":0}]},{"id":"comp_2","layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Small Drop","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":39.039,"s":[960,540,0],"to":[-15.167,-13.75,0],"ti":[15.167,13.75,0]},{"t":52.052052052052,"s":[869,457.5,0]}],"ix":2,"l":2},"a":{"a":0,"k":[100.5,100.5,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":11.011,"s":[0,0,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":39.039,"s":[100,100,100]},{"t":52.052052052052,"s":[14,0,100]}],"ix":6,"l":2}},"ao":0,"ef":[{"ty":5,"nm":"CC Kaleida","np":7,"mn":"CC Kaleida","ix":1,"en":1,"ef":[{"ty":3,"nm":"Center","mn":"CC Kaleida-0001","ix":1,"v":{"a":0,"k":[959,539],"ix":1}},{"ty":0,"nm":"Size","mn":"CC Kaleida-0002","ix":2,"v":{"a":0,"k":78,"ix":2}},{"ty":7,"nm":"Mirroring","mn":"CC Kaleida-0003","ix":3,"v":{"a":0,"k":1,"ix":3}},{"ty":0,"nm":"Rotation","mn":"CC Kaleida-0004","ix":4,"v":{"a":0,"k":0,"ix":4}},{"ty":7,"nm":"Floating Center","mn":"CC Kaleida-0005","ix":5,"v":{"a":0,"k":1,"ix":5}}]}],"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-7.232,-7.232],[0,0],[7.232,7.232],[-7.232,7.232]],"o":[[7.232,7.232],[0,0],[-7.232,-7.231],[7.232,-7.232]],"v":[[5.6,-20.59],[27.822,27.822],[-20.589,5.599],[-20.589,-20.59]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.929000016755,0.078000005086,0.356999984442,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[67.495,67.005],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 5","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":11.011011011011,"op":311.311311311311,"st":11.011011011011,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Big Drop","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":28.028,"s":[960,540,0],"to":[0,-15.333,0],"ti":[0,15.333,0]},{"t":41.041041041041,"s":[960,448,0]}],"ix":2,"l":2},"a":{"a":0,"k":[100.5,100.5,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[0,0,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":28.028,"s":[100,100,100]},{"t":41.041041041041,"s":[14,0,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,10.227],[-10.228,0],[0,-10.228]],"o":[[0,0],[0,-10.228],[10.228,0],[0,10.227]],"v":[[0,44.444],[-18.519,-25.926],[0,-44.445],[18.519,-25.926]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.929000016755,0.078000005086,0.356999984442,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[100.25,44.695],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":300.3003003003,"st":0,"bm":0}]}],"layers":[{"ddd":0,"ind":1,"ty":0,"nm":"Comp 9","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[102.5,102.5,0],"ix":2,"l":2},"a":{"a":0,"k":[960,540,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"w":1920,"h":1080,"ip":0,"op":165.165165165165,"st":0,"bm":0}],"markers":[]}

src/App.vue

@@ -2,7 +2,6 @@
   <div id="app">
     <header class="header">
       <s-button class="polkaswap-logo" type="link" @click="goTo(PageNames.Swap)" />
-
       <div class="app-controls s-flex">
         <branded-tooltip v-if="nodesFeatureEnabled" popper-class="info-tooltip" placement="bottom">
           <div slot="content">
@@ -25,7 +24,7 @@
               <div class="account-name">{{ accountInfo }}</div>
               <div class="account-icon">
                 <s-icon v-if="!isLoggedIn" name="finance-wallet-24" />
-                <WalletAvatar v-else :address="account.address"/>
+                <WalletAvatar v-else :address="account.address" />
               </div>
             </div>
           </s-button>

src/components/BrandedTooltip.vue

@@ -6,7 +6,7 @@
       ...$attrs
     }"
   >
-    <slot slot="content" name="content"/>
+    <slot slot="content" name="content" />
     <!-- element-ui disabled tooltip disables wrapped button, this is the way to fix it -->
     <span>
       <slot/>

src/components/LottieLoader.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="lottie-loader" :style="`width: ${size}; height: ${size};`">
+    <lottie-animation path="json/loader.json" />
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator'
+
+import LottieAnimation from 'lottie-vuejs/src/LottieAnimation.vue'
+
+@Component({
+  components: {
+    LottieAnimation
+  }
+})
+export default class LottieLoader extends Vue {
+  @Prop({ default: '42px', type: String }) readonly size!: string
+}
+</script>
+
+<style lang="scss">
+$lottie-loader-class: '.lottie-loader';
+#{$lottie-loader-class} {
+  display: none;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  margin: auto;
+  z-index: 3003;
+}
+#{$lottie-loader-class}--loading {
+  position: relative;
+  &:before {
+    border-radius: inherit;
+    display: block;
+    height: 100%;
+    width: 100%;
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 3002;
+    background-color: var(--s-color-utility-body);
+  }
+  #{$lottie-loader-class} {
+    display: block;
+  }
+  #{$lottie-loader-class}--loading {
+    &:before {
+      z-index: 3000;
+    }
+    #{$lottie-loader-class} {
+      z-index: 3001;
+    }
+  }
+}
+</style>

src/components/NetworkBadge.vue

@@ -5,7 +5,7 @@
         {{ statusText }}
       </div>
     </div>
-    <s-icon v-else name="el-icon-loading"/>
+    <s-icon v-else name="el-icon-loading" />
   </div>
 </template>
 

src/components/Settings/Header.vue

@@ -7,7 +7,7 @@
       popper-class="info-tooltip info-tooltip--settings-header"
       placement="right-start"
     >
-      <slot slot="content" :name="tooltipScopedSlot"/>
+      <slot slot="content" :name="tooltipScopedSlot" />
       <s-icon class="settings-header-hint" name="info-16" size="12px" />
     </branded-tooltip>
   </div>

src/components/Settings/SlippageTolerance.vue

@@ -2,7 +2,7 @@
   <div :class="slippageToleranceClasses">
     <div class="slippage-tolerance-default">
       <settings-header :title="t('dexSettings.slippageTolerance')" :tooltip="t('dexSettings.slippageToleranceHint')" />
-      <settings-tabs :value="String(slippageTolerance)" :tabs="SlippageToleranceTabs" @click="selectTab"/>
+      <settings-tabs :value="String(slippageTolerance)" :tabs="SlippageToleranceTabs" @click="selectTab" />
     </div>
     <div class="slippage-tolerance-custom">
       <settings-header :title="t('dexSettings.custom')" />

src/components/TokenLogo.vue

@@ -1,5 +1,5 @@
 <template>
-  <span :class="tokenClasses" :style="tokenStyles"/>
+  <span :class="tokenClasses" :style="tokenStyles" />
 </template>
 
 <script lang="ts">

src/main.ts

@@ -5,12 +5,31 @@ import router from './router'
 import store from './store'
 import i18n from './lang'
 import { app } from './consts'
+import LottieLoader from '@/components/LottieLoader.vue'
 
 import './plugins'
 import './styles'
 
+const LOADING_CLASS = 'lottie-loader--loading'
+
 Vue.config.productionTip = false
 Vue.config.devtools = process.env.NODE_ENV === 'development'
+Vue.directive('lottie-loader', {
+  inserted: function (el, binding) {
+    const loaderInstance = new LottieLoader()
+    if (binding?.value?.size) {
+      loaderInstance.$props.size = binding.value.size
+    }
+    loaderInstance.$mount()
+    el.classList.add(LOADING_CLASS)
+    el.appendChild(loaderInstance.$el)
+  },
+  componentUpdated: function (el, binding) {
+    if (binding?.value?.loading === false) {
+      el.classList.remove(LOADING_CLASS)
+    }
+  }
+})
 
 router.beforeEach((to, from, next): void => {
   if (to && to.name && i18n.te(`pageTitle.${to.name}`)) {

src/plugins/index.ts

@@ -1,2 +1,3 @@
+import './lottie'
 import './wallet'
 import './soramitsuUI'

src/plugins/lottie.ts

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import LottieAnimation from 'lottie-vuejs/src/LottieAnimation.vue'
+
+Vue.use(LottieAnimation as any)

src/plugins/soramitsuUI.ts

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import SoramitsuElements, { Message, MessageBox, Notification, setTheme } from '@soramitsu/soramitsu-js-ui'
+import SoramitsuElements, { Message, MessageBox, Notification, Loading } from '@soramitsu/soramitsu-js-ui'
 import '@soramitsu/soramitsu-js-ui/lib/styles'
 
 import store from '@/store'

src/views/AddLiquidity.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container" v-loading="parentLoading">
+  <div v-lottie-loader="{ loading: parentLoading }" class="container">
     <generic-page-header has-button-back :title="t('addLiquidity.title')" :tooltip="t('pool.description')" @back="handleBack" />
     <s-form
       class="el-form--actions"

src/views/Bridge.vue

@@ -2,7 +2,7 @@
   <div class="bridge s-flex">
     <s-form class="bridge-form" :show-message="false">
       <s-card
-        v-loading="parentLoading"
+        v-lottie-loader="{ loading: parentLoading }"
         class="bridge-content"
         border-radius="medium"
         shadow="never"
@@ -197,6 +197,7 @@ import NetworkFormatterMixin from '@/components/mixins/NetworkFormatterMixin'
 import TranslationMixin from '@/components/mixins/TranslationMixin'
 import LoadingMixin from '@/components/mixins/LoadingMixin'
 import NumberFormatterMixin from '@/components/mixins/NumberFormatterMixin'
+
 import router, { lazyComponent } from '@/router'
 import { Components, PageNames, EvmSymbol } from '@/consts'
 import { SubNetwork } from '@/utils/web3-util'

src/views/BridgeTransaction.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-loading="!isInitRequestCompleted" class="transaction-container">
+  <div v-lottie-loader="{ loading: !isInitRequestCompleted }" class="transaction-container">
     <s-button
       v-if="isInitRequestCompleted"
       class="s-button--view-transactions-history"
@@ -13,7 +13,13 @@
     <s-card class="transaction-content" border-radius="medium" shadow="never">
       <template v-if="isInitRequestCompleted">
         <div class="header">
-          <div v-loading="isTransactionFromPending || isTransactionToPending" :class="headerIconClasses" />
+          <div
+            v-lottie-loader="{
+              loading: isTransactionFromPending || isTransactionToPending,
+              size: '83px'
+            }"
+            :class="headerIconClasses"
+          />
           <h5 class="header-details">
             {{ `${formattedAmount} ${formatAssetSymbol(assetSymbol)}` }}
             <i :class="`s-icon--network s-icon-${isSoraToEvm ? 'sora' : getEvmIcon}`" />
@@ -166,6 +172,7 @@ import BridgeMixin from '@/components/mixins/BridgeMixin'
 import NetworkFormatterMixin from '@/components/mixins/NetworkFormatterMixin'
 import LoadingMixin from '@/components/mixins/LoadingMixin'
 import NumberFormatterMixin from '@/components/mixins/NumberFormatterMixin'
+
 import router, { lazyComponent } from '@/router'
 import { Components, PageNames, EvmSymbol, MetamaskCancellationCode } from '@/consts'
 import { formatAssetSymbol, copyToClipboard, formatDateItem, hasInsufficientBalance, hasInsufficientXorForFee, hasInsufficientEvmNativeTokenForFee } from '@/utils'
@@ -660,7 +667,6 @@ export default class BridgeTransaction extends Mixins(
 <style lang="scss">
 $collapse-horisontal-padding: $inner-spacing-medium;
 $header-icon-size: 100px;
-$header-spinner-size: 83px;
 $collapse-header-title-font-size: $s-heading3-caps-font-size;
 $collapse-header-title-line-height: $s-line-height-base;
 $collapse-header-title-height: #{$collapse-header-title-font-size * $collapse-header-title-line-height};
@@ -669,6 +675,16 @@ $collapse-header-height: calc(#{$basic-spacing * 4} + #{$collapse-header-title-h
 .transaction {
   &-container {
     @include bridge-container;
+    .header-icon {
+      &.lottie-loader--loading:before {
+        background-color: transparent;
+      }
+      &:not(.header-icon--success):not(.header-icon--wait):not(.header-icon--error) {
+        .lottie-loader {
+          display: block;
+        }
+      }
+    }
   }
   &-content {
     .el-card__body {
@@ -677,14 +693,6 @@ $collapse-header-height: calc(#{$basic-spacing * 4} + #{$collapse-header-title-h
     .header-icon {
       position: relative;
       @include svg-icon('', $header-icon-size);
-      .el-loading-spinner {
-        top: 0;
-        margin-top: calc(#{$header-icon-size - $header-spinner-size} / 2);
-        .circular {
-          width: $header-spinner-size;
-          height: $header-spinner-size;
-        }
-      }
     }
     .el-button .network-title {
       text-transform: uppercase;

src/views/BridgeTransactionsHistory.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="history-container">
-    <s-card v-loading="parentLoading" class="history-content" border-radius="medium" shadow="never">
+    <s-card
+      v-lottie-loader="{ loading: parentLoading }"
+      class="history-content"
+      border-radius="medium"
+      shadow="never"
+    >
       <generic-page-header has-button-back :title="t('bridgeHistory.title')" @back="handleBack">
         <!-- <s-button
           class="base-title_settings"
@@ -29,7 +34,7 @@
             </template>
           </s-input>
         </s-form-item>
-        <div class="history-items" v-loading="loading">
+        <div v-lottie-loader="{ loading: loading }" class="history-items">
           <template v-if="hasHistory">
             <div
               class="history-item"
@@ -80,10 +85,10 @@
 import { Component, Mixins, Prop } from 'vue-property-decorator'
 import { Getter, Action } from 'vuex-class'
 import { RegisteredAccountAsset, Operation, isBridgeOperation, BridgeHistory, CodecString, FPNumber } from '@sora-substrate/util'
-import { api } from '@soramitsu/soraneo-wallet-web'
 
 import TranslationMixin from '@/components/mixins/TranslationMixin'
 import LoadingMixin from '@/components/mixins/LoadingMixin'
+
 import NetworkFormatterMixin from '@/components/mixins/NetworkFormatterMixin'
 import router, { lazyComponent } from '@/router'
 import { Components, PageNames } from '@/consts'

src/views/CreatePair.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container" v-loading="parentLoading">
+  <div v-lottie-loader="{ loading: parentLoading }" class="container">
     <generic-page-header has-button-back :title="t('createPair.title')" :tooltip="t('pool.description')" @back="handleBack" />
     <s-form
       class="el-form--actions"

src/views/Pool.vue

@@ -1,7 +1,7 @@
 <template>
-  <div v-loading="parentLoading" class="container el-form--pool">
+  <div v-lottie-loader="{ loading: parentLoading }" class="container el-form--pool">
     <generic-page-header class="page-header--pool" :title="t('exchange.Pool')" :tooltip="t('pool.description')" />
-    <div class="pool-wrapper" v-loading="loading">
+    <div v-lottie-loader="{ loading: loading }" class="pool-wrapper">
       <p v-if="!isLoggedIn" class="pool-info-container">
         {{ t('pool.connectToWallet') }}
       </p>
@@ -67,6 +67,7 @@ import { AccountLiquidity } from '@sora-substrate/util'
 import TranslationMixin from '@/components/mixins/TranslationMixin'
 import LoadingMixin from '@/components/mixins/LoadingMixin'
 import NumberFormatterMixin from '@/components/mixins/NumberFormatterMixin'
+
 import router, { lazyComponent } from '@/router'
 import { Components, PageNames } from '@/consts'
 

src/views/RemoveLiquidity.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container" v-loading="loading || parentLoading">
+  <div v-lottie-loader="{ loading: loading || parentLoading }" class="container">
     <generic-page-header has-button-back :title="t('removeLiquidity.title')" :tooltip="t('removeLiquidity.description')" @back="handleBack" />
     <s-form
       class="el-form--actions"

src/views/Rewards.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container rewards" v-loading="parentLoading">
+  <div v-lottie-loader="{ loading: parentLoading }" class="container rewards">
     <generic-page-header :title="t('rewards.title')" />
     <gradient-box class="rewards-block" :symbol="gradientSymbol">
       <div class="rewards-box">

src/views/Swap.vue

@@ -1,5 +1,9 @@
 <template>
-  <s-form v-loading="parentLoading" class="container el-form--actions" :show-message="false">
+  <s-form
+    v-lottie-loader="{ loading: parentLoading }"
+    class="container el-form--actions"
+    :show-message="false"
+  >
     <generic-page-header class="page-header--swap" :title="t('exchange.Swap')">
       <status-action-badge v-if="pairLiquiditySourcesAvailable">
         <template #label>{{ t('marketText') }}:</template>