From faad24d1d5f9c72cf581db85e70533e0b2599f98 Mon Sep 17 00:00:00 2001
From: tiny-craft <137850705+tiny-craft@users.noreply.github.com>
Date: Sat, 28 Oct 2023 22:42:15 +0800
Subject: [PATCH] perf: force change icon button color when then state is
 loading

---
 frontend/src/components/common/IconButton.vue   | 8 +++++---
 frontend/src/components/sidebar/BrowserTree.vue | 5 ++++-
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/common/IconButton.vue b/frontend/src/components/common/IconButton.vue
index 79d4ba7..85c2326 100644
--- a/frontend/src/components/common/IconButton.vue
+++ b/frontend/src/components/common/IconButton.vue
@@ -14,7 +14,7 @@ const props = defineProps({
     },
     color: {
         type: String,
-        default: 'currentColor',
+        default: '',
     },
     strokeWidth: {
         type: [Number, String],
@@ -38,9 +38,10 @@ const hasTooltip = computed(() => {
                 :focusable="false"
                 :loading="loading"
                 :text="!border"
+                :color="props.color"
                 @click.prevent="emit('click')">
                 <template #icon>
-                    <n-icon :color="props.color" :size="props.size">
+                    <n-icon :color="props.color || 'currentColor'" :size="props.size">
                         <component :is="props.icon" :stroke-width="props.strokeWidth" />
                     </n-icon>
                 </template>
@@ -54,9 +55,10 @@ const hasTooltip = computed(() => {
         :focusable="false"
         :loading="loading"
         :text="!border"
+        :color="props.color"
         @click.prevent="emit('click')">
         <template #icon>
-            <n-icon :color="props.color" :size="props.size">
+            <n-icon :color="props.color || 'currentColor'" :size="props.size">
                 <component :is="props.icon" :stroke-width="props.strokeWidth" />
             </n-icon>
         </template>
diff --git a/frontend/src/components/sidebar/BrowserTree.vue b/frontend/src/components/sidebar/BrowserTree.vue
index f47ed38..45b5339 100644
--- a/frontend/src/components/sidebar/BrowserTree.vue
+++ b/frontend/src/components/sidebar/BrowserTree.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { computed, h, nextTick, onMounted, reactive, ref } from 'vue'
 import { ConnectionType } from '@/consts/connection_type.js'
-import { NIcon, NSpace, NTag } from 'naive-ui'
+import { NIcon, NSpace, NTag, useThemeVars } from 'naive-ui'
 import Key from '@/components/icons/Key.vue'
 import Binary from '@/components/icons/Binary.vue'
 import Database from '@/components/icons/Database.vue'
@@ -31,6 +31,7 @@ const props = defineProps({
     keyView: String,
 })
 
+const themeVars = useThemeVars()
 const i18n = useI18n()
 const loading = ref(false)
 const loadingConnections = ref(false)
@@ -532,6 +533,7 @@ const getDatabaseMenu = (opened, loading, end) => {
                 icon: LoadList,
                 disabled: end === true,
                 loading: loading === true,
+                color: loading === true ? themeVars.value.primaryColor : '',
                 onClick: () => handleSelectContextMenu('db_loadmore'),
             }),
             h(IconButton, {
@@ -539,6 +541,7 @@ const getDatabaseMenu = (opened, loading, end) => {
                 icon: LoadAll,
                 disabled: end === true,
                 loading: loading === true,
+                color: loading === true ? themeVars.value.primaryColor : '',
                 onClick: () => handleSelectContextMenu('db_loadall'),
             }),
             h(IconButton, {