From 36b77fc563f261c6884abee7baeb8947c497c4fe Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Thu, 21 Apr 2022 17:44:25 +0800
Subject: [PATCH] perf: improve button loading styles

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 src/components/base/button/Button.vue | 27 +++++++++++++++++++++------
 src/views/ViewComponents.vue          |  8 ++++----
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/src/components/base/button/Button.vue b/src/components/base/button/Button.vue
index 5e225e2b..9c6ef9ad 100644
--- a/src/components/base/button/Button.vue
+++ b/src/components/base/button/Button.vue
@@ -5,14 +5,10 @@
     class="btn"
     @click="handleClick"
   >
-    <span
-      v-if="$slots.icon || loading"
-      :class="{ 'mr-3': !!$slots.default }"
-      class="btn-icon"
-    >
+    <span v-if="$slots.icon || loading" class="btn-icon">
       <svg
         v-if="loading"
-        class="animate-spin h-5 w-5 text-white"
+        class="animate-spin"
         fill="none"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
@@ -124,6 +120,9 @@ function handleClick() {
 
 .btn-default {
   border: 1px solid #d9d9d9;
+  .btn-icon {
+    color: #0e1731;
+  }
 }
 
 .btn-primary {
@@ -145,6 +144,12 @@ function handleClick() {
   @apply w-full;
 }
 
+.btn-icon {
+  @apply h-5 w-5;
+  @apply text-white;
+  @apply mr-3;
+}
+
 .btn-loading {
   @apply cursor-not-allowed;
   &:hover {
@@ -162,12 +167,22 @@ function handleClick() {
   @apply h-7;
   @apply px-3;
   @apply text-xs;
+
+  .btn-icon {
+    @apply h-3 w-3;
+    @apply mr-2;
+  }
 }
 
 .btn-xs {
   @apply h-6;
   @apply px-2;
   @apply text-xs;
+
+  .btn-icon {
+    @apply h-3 w-3;
+    @apply mr-2;
+  }
 }
 
 .btn-circle {
diff --git a/src/views/ViewComponents.vue b/src/views/ViewComponents.vue
index 4539259a..3f5ea84e 100644
--- a/src/views/ViewComponents.vue
+++ b/src/views/ViewComponents.vue
@@ -77,25 +77,25 @@
           <VSpace>
             <VButton size="lg" type="secondary">
               <template #icon>
-                <IconSettings />
+                <IconSettings class="w-full h-full" />
               </template>
               Large
             </VButton>
             <VButton type="secondary">
               <template #icon>
-                <IconSettings />
+                <IconSettings class="w-full h-full" />
               </template>
               Default
             </VButton>
             <VButton size="sm" type="secondary">
               <template #icon>
-                <IconSettings />
+                <IconSettings class="w-full h-full" />
               </template>
               sm
             </VButton>
             <VButton size="xs" type="secondary">
               <template #icon>
-                <IconSettings />
+                <IconSettings class="w-full h-full" />
               </template>
               xs
             </VButton>