FieldFee: add loader

MinterTeam · Apr 14, 2022 · d2953de · d2953de
1 parent 9aa42d3
commit d2953de
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git 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
@@ -27,6 +27,7 @@ export default {
             type: Array,
             default: () => [],
         },
+        /** @type {Array<FeeData>} */
         fee: {
             type: Object,
             required: true,
@@ -73,14 +74,15 @@ 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>-->
         <span class="form-field__error" v-else-if="$value.$dirty && $value.fee === false">{{ fee.error }}</span>
         <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>