From 50ee5d1f497a76c3978d8c89ff21a4c6300126a8 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Mon, 14 Aug 2023 23:12:35 +0800
Subject: [PATCH] hide control buttons when loading

---
 src/views/desktop/ExchangeRatesPage.vue   | 3 ++-
 src/views/desktop/accounts/ListPage.vue   | 9 ++++++---
 src/views/desktop/categories/ListPage.vue | 9 ++++++---
 src/views/desktop/tags/ListPage.vue       | 9 ++++++---
 4 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/views/desktop/ExchangeRatesPage.vue b/src/views/desktop/ExchangeRatesPage.vue
index 32838530..f5b81b25 100644
--- a/src/views/desktop/ExchangeRatesPage.vue
+++ b/src/views/desktop/ExchangeRatesPage.vue
@@ -106,8 +106,9 @@
                                                     <span class="text-sm">{{ exchangeRate.currencyDisplayName }}</span>
                                                     <span class="text-caption ml-1">{{ exchangeRate.currencyCode }}</span>
                                                     <v-spacer/>
-                                                    <v-btn class="hover-display px-2 ml-2 mr-3" color="default"
+                                                    <v-btn class="px-2 ml-2 mr-3" color="default"
                                                            density="comfortable" variant="text"
+                                                           :class="{ 'd-none': loading, 'hover-display': !loading }"
                                                            @click="setAsBaseline(exchangeRate.currencyCode, exchangeRate)">
                                                         {{ $t('Set As Baseline') }}
                                                     </v-btn>
diff --git a/src/views/desktop/accounts/ListPage.vue b/src/views/desktop/accounts/ListPage.vue
index 24dc2e31..bcf81ae6 100644
--- a/src/views/desktop/accounts/ListPage.vue
+++ b/src/views/desktop/accounts/ListPage.vue
@@ -173,20 +173,23 @@
                                                                            :to="`/transaction/list?accountId=${accountOrSubAccountId(element)}`">
                                                                         {{ $t('Transaction List') }}
                                                                     </v-btn>
-                                                                    <v-btn class="hover-display px-2 ml-1" density="comfortable" color="default" variant="text"
+                                                                    <v-btn class="px-2 ml-1" density="comfortable" color="default" variant="text"
+                                                                           :class="{ 'd-none': loading, 'hover-display': !loading }"
                                                                            :disabled="loading"
                                                                            :prepend-icon="element.hidden ? icons.show : icons.hide"
                                                                            v-if="!activeSubAccount[element.id]"
                                                                            @click="hide(element, !element.hidden)">
                                                                         {{ element.hidden ? $t('Show') : $t('Hide') }}
                                                                     </v-btn>
-                                                                    <v-btn class="hover-display px-2 ml-1" density="comfortable" color="default" variant="text"
+                                                                    <v-btn class="px-2 ml-1" density="comfortable" color="default" variant="text"
+                                                                           :class="{ 'd-none': loading, 'hover-display': !loading }"
                                                                            :disabled="loading" :prepend-icon="icons.edit"
                                                                            v-if="!activeSubAccount[element.id]"
                                                                            @click="edit(element)">
                                                                         {{ $t('Edit') }}
                                                                     </v-btn>
-                                                                    <v-btn class="hover-display px-2 ml-1" density="comfortable" color="default" variant="text"
+                                                                    <v-btn class="px-2 ml-1" density="comfortable" color="default" variant="text"
+                                                                           :class="{ 'd-none': loading, 'hover-display': !loading }"
                                                                            :disabled="loading" :prepend-icon="icons.remove"
                                                                            v-if="!activeSubAccount[element.id]"
                                                                            @click="remove(element)">
diff --git a/src/views/desktop/categories/ListPage.vue b/src/views/desktop/categories/ListPage.vue
index 42bad157..af05306b 100644
--- a/src/views/desktop/categories/ListPage.vue
+++ b/src/views/desktop/categories/ListPage.vue
@@ -130,23 +130,26 @@
 
                                                             <v-spacer/>
 
-                                                            <v-btn class="hover-display px-2 ml-2" color="default"
+                                                            <v-btn class="px-2 ml-2" color="default"
                                                                    density="comfortable" variant="text"
+                                                                   :class="{ 'd-none': loading, 'hover-display': !loading }"
                                                                    :prepend-icon="element.hidden ? icons.show : icons.hide"
                                                                    :loading="categoryHiding[element.id]"
                                                                    :disabled="loading || updating"
                                                                    @click="hide(element, !element.hidden)">
                                                                 {{ element.hidden ? $t('Show') : $t('Hide') }}
                                                             </v-btn>
-                                                            <v-btn class="hover-display px-2" color="default"
+                                                            <v-btn class="px-2" color="default"
                                                                    density="comfortable" variant="text"
+                                                                   :class="{ 'd-none': loading, 'hover-display': !loading }"
                                                                    :prepend-icon="icons.edit"
                                                                    :disabled="loading || updating"
                                                                    @click="edit(element)">
                                                                 {{ $t('Edit') }}
                                                             </v-btn>
-                                                            <v-btn class="hover-display px-2" color="default"
+                                                            <v-btn class="px-2" color="default"
                                                                    density="comfortable" variant="text"
+                                                                   :class="{ 'd-none': loading, 'hover-display': !loading }"
                                                                    :prepend-icon="icons.remove"
                                                                    :loading="categoryRemoving[element.id]"
                                                                    :disabled="loading || updating"
diff --git a/src/views/desktop/tags/ListPage.vue b/src/views/desktop/tags/ListPage.vue
index abcb80f9..588f8086 100644
--- a/src/views/desktop/tags/ListPage.vue
+++ b/src/views/desktop/tags/ListPage.vue
@@ -104,8 +104,9 @@
 
                                         <v-spacer/>
 
-                                        <v-btn class="hover-display px-2 ml-2" color="default"
+                                        <v-btn class="px-2 ml-2" color="default"
                                                density="comfortable" variant="text"
+                                               :class="{ 'd-none': loading, 'hover-display': !loading }"
                                                :prepend-icon="element.hidden ? icons.show : icons.hide"
                                                :loading="tagHiding[element.id]"
                                                :disabled="loading || updating"
@@ -113,8 +114,9 @@
                                                @click="hide(element, !element.hidden)">
                                             {{ element.hidden ? $t('Show') : $t('Hide') }}
                                         </v-btn>
-                                        <v-btn class="hover-display px-2" color="default"
+                                        <v-btn class="px-2" color="default"
                                                density="comfortable" variant="text"
+                                               :class="{ 'd-none': loading, 'hover-display': !loading }"
                                                :prepend-icon="icons.edit"
                                                :loading="tagUpdating[element.id]"
                                                :disabled="loading || updating"
@@ -122,8 +124,9 @@
                                                @click="edit(element)">
                                             {{ $t('Edit') }}
                                         </v-btn>
-                                        <v-btn class="hover-display px-2" color="default"
+                                        <v-btn class="px-2" color="default"
                                                density="comfortable" variant="text"
+                                               :class="{ 'd-none': loading, 'hover-display': !loading }"
                                                :prepend-icon="icons.remove"
                                                :loading="tagRemoving[element.id]"
                                                :disabled="loading || updating"