From d2953de875c63e55ce0a7b8247e852a8ad5523cd Mon Sep 17 00:00:00 2001
From: shrpne <shrpne@gmail.com>
Date: Thu, 14 Apr 2022 15:05:16 +0300
Subject: [PATCH] FieldFee: add loader

---
 components/common/FieldCoin.vue | 7 +++++++
 components/common/FieldFee.vue  | 4 +++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/components/common/FieldCoin.vue b/components/common/FieldCoin.vue
index cdf8509a..df245d19 100644
--- a/components/common/FieldCoin.vue
+++ b/components/common/FieldCoin.vue
@@ -3,6 +3,7 @@
     import checkEmpty from '~/assets/v-check-empty';
     import {pretty} from '~/assets/utils.js';
     import {COIN_TYPE} from '~/assets/variables.js';
+    import Loader from '~/components/common/Loader.vue';
     import InputUppercase from '~/components/common/InputUppercase';
 
     const MAX_ITEM_COUNT = 6;
@@ -12,6 +13,7 @@
         MAX_ITEM_COUNT,
         components: {
             VueSimpleSuggest,
+            Loader,
             InputUppercase,
         },
         directives: {
@@ -48,6 +50,10 @@
                 type: Boolean,
                 default: false,
             },
+            isLoading: {
+                type: Boolean,
+                default: false,
+            },
         },
         data() {
             return {
@@ -204,5 +210,6 @@
                 <span v-if="getSuggestionAmount(suggestion)">{{ getSuggestionAmount(suggestion) }}</span>
             </div>
         </VueSimpleSuggest>
+        <Loader class="form-field__icon form-field__icon--loader" :isLoading="isLoading"/>
     </label>
 </template>
diff --git a/components/common/FieldFee.vue b/components/common/FieldFee.vue
index a38c5c65..710eacab 100644
--- a/components/common/FieldFee.vue
+++ b/components/common/FieldFee.vue
@@ -27,6 +27,7 @@ export default {
             type: Array,
             default: () => [],
         },
+        /** @type {Array<FeeData>} */
         fee: {
             type: Object,
             required: true,
@@ -73,6 +74,7 @@ export default {
             :label="label"
             :coin-list="gasSuitableBalance"
             :select-mode="true"
+            :is-loading="fee.isLoading"
         />
         <span class="form-field__error" v-if="$value.$dirty && $value.minLength === false">{{ $td('Min 3 letters', 'form.coin-error-min') }}</span>
         <!--<span class="form-field__error" v-else-if="$value.$dirty && !$value.maxLength">{{ $td('Max 10 letters', 'form.coin-error-max') }}</span>-->
@@ -80,7 +82,7 @@ export default {
         <div class="form-field__help" v-else-if="$store.getters.isOfflineMode">{{ $td(`Equivalent of ${$store.getters.COIN_NAME} ${pretty(fee.baseCoinValue)}`, 'form.fee-help', {value: pretty(fee.baseCoinValue), coin: $store.getters.COIN_NAME}) }}</div>
         <div class="form-field__help" v-else>
             {{ pretty(fee.value) }} {{ fee.coinSymbol }}
-            <span class="u-display-ib" v-if="!fee.isBaseCoin">({{ pretty(fee.baseCoinValue) }} {{ $store.getters.COIN_NAME }})</span>
+            <span class="u-display-ib" v-if="!fee.isBaseCoin && fee.baseCoinValue">({{ pretty(fee.baseCoinValue) }} {{ $store.getters.COIN_NAME }})</span>
         </div>
     </div>
 </template>