From 444f643d4ad560e6c8957f9f54d0f40fb671a9b6 Mon Sep 17 00:00:00 2001
From: tiny-craft <137850705+tiny-craft@users.noreply.github.com>
Date: Fri, 20 Oct 2023 18:22:22 +0800
Subject: [PATCH] perf: add loading property to icon button

---
 frontend/src/components/common/IconButton.vue | 34 ++++++++++++++-----
 1 file changed, 25 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/common/IconButton.vue b/frontend/src/components/common/IconButton.vue
index 81df265..79d4ba7 100644
--- a/frontend/src/components/common/IconButton.vue
+++ b/frontend/src/components/common/IconButton.vue
@@ -20,6 +20,7 @@ const props = defineProps({
         type: [Number, String],
         default: 3,
     },
+    loading: Boolean,
     border: Boolean,
     disabled: Boolean,
 })
@@ -30,20 +31,35 @@ const hasTooltip = computed(() => {
 </script>
 
 <template>
-    <n-tooltip v-if="hasTooltip">
+    <n-tooltip v-if="hasTooltip" :show-arrow="false">
         <template #trigger>
-            <n-button :disabled="disabled" :text="!border" :focusable="false" @click.prevent="emit('click')">
-                <n-icon :color="props.color" :size="props.size">
-                    <component :is="props.icon" :stroke-width="props.strokeWidth" />
-                </n-icon>
+            <n-button
+                :disabled="disabled"
+                :focusable="false"
+                :loading="loading"
+                :text="!border"
+                @click.prevent="emit('click')">
+                <template #icon>
+                    <n-icon :color="props.color" :size="props.size">
+                        <component :is="props.icon" :stroke-width="props.strokeWidth" />
+                    </n-icon>
+                </template>
             </n-button>
         </template>
         {{ props.tTooltip ? $t(props.tTooltip) : props.tooltip }}
     </n-tooltip>
-    <n-button v-else :disabled="disabled" :text="!border" :focusable="false" @click.prevent="emit('click')">
-        <n-icon :color="props.color" :size="props.size">
-            <component :is="props.icon" :stroke-width="props.strokeWidth" />
-        </n-icon>
+    <n-button
+        v-else
+        :disabled="disabled"
+        :focusable="false"
+        :loading="loading"
+        :text="!border"
+        @click.prevent="emit('click')">
+        <template #icon>
+            <n-icon :color="props.color" :size="props.size">
+                <component :is="props.icon" :stroke-width="props.strokeWidth" />
+            </n-icon>
+        </template>
     </n-button>
 </template>