fix: buttuon loading state

fix #188

Author: Barbapapazes

.playground/src/pages/components/button.vue

@@ -37,6 +37,10 @@ onMounted(() => {
 
     <Button :label :color="color" :loading="isLoading" leading-icon="i-lucide-info" trailing-icon="i-lucide-info" />
 
+    <Button :label :color="color" :loading="isLoading" leading-icon="i-lucide-info" />
+
+    <Button :label :color="color" :loading="isLoading" />
+
     <Button :label :color="color" block />
 
     <Button :label :color="color" href="https://example.com" />

src/components/Button/__snapshots__/Button.test.ts.snap

@@ -396,8 +396,20 @@ exports[`button > renders with loading and avatar correctly 1`] = `
   
   
   <span
-    class="inline-block i-lucide-loader shrink-0 size-5 opacity-0"
-  />
+    class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"
+  >
+    
+    <img
+      class="h-full w-full rounded-[inherit] object-cover"
+      role="img"
+      src="https://github.com/vuejs.png"
+      style="display: none;"
+    />
+    <span
+      class="font-medium leading-none text-muted truncate"
+    />
+    
+  </span>
   
   
   <!--v-if-->
@@ -423,9 +435,7 @@ exports[`button > renders with loading correctly 1`] = `
 >
   
   
-  <span
-    class="inline-block i-lucide-loader shrink-0 size-5 opacity-0"
-  />
+  <!--v-if-->
   
   
   <!--v-if-->
@@ -471,9 +481,7 @@ exports[`button > renders with loading trailing and avatar correctly 1`] = `
   <!--v-if-->
   
   
-  <span
-    class="inline-block i-lucide-loader shrink-0 size-5 opacity-0"
-  />
+  <!--v-if-->
   
   
   <span
@@ -499,9 +507,7 @@ exports[`button > renders with loading trailing correctly 1`] = `
   <!--v-if-->
   
   
-  <span
-    class="inline-block i-lucide-loader shrink-0 size-5 opacity-0"
-  />
+  <!--v-if-->
   
   
   <span
@@ -522,9 +528,7 @@ exports[`button > renders with loadingIcon correctly 1`] = `
 >
   
   
-  <span
-    class="inline-block i-lucide-loader shrink-0 size-5 opacity-0"
-  />
+  <!--v-if-->
   
   
   <!--v-if-->

src/composables/useComponentIcons.ts

@@ -1,6 +1,5 @@
 import type { AvatarProps } from '@/ui/components/Avatar/Avatar.vue'
 import type { MaybeRefOrGetter } from 'vue'
-import { loadingIcon } from '@/ui/icons'
 import { computed, toValue } from 'vue'
 
 export interface UseComponentIconsProps {
@@ -16,20 +15,20 @@ export interface UseComponentIconsProps {
 export function useComponentIcons(componentProps: MaybeRefOrGetter<UseComponentIconsProps>) {
   const props = computed(() => toValue(componentProps))
 
-  const isLeading = computed(() => (props.value.icon && props.value.leading) || (props.value.icon && !props.value.trailing) || (props.value.loading && !props.value.trailing) || !!props.value.leadingIcon)
-  const isTrailing = computed(() => (props.value.icon && props.value.trailing) || (props.value.loading && props.value.trailing) || !!props.value.trailingIcon)
+  const isLeading = computed(() => (props.value.icon && props.value.leading) || (props.value.icon && !props.value.trailing) || !!props.value.leadingIcon)
+  const isTrailing = computed(() => (props.value.icon && props.value.trailing) || !!props.value.trailingIcon)
 
   const leadingIconName = computed(() => {
     if (props.value.loading) {
-      return loadingIcon
+      return ''
     }
 
     return props.value.leadingIcon || props.value.icon
   })
 
   const trailingIconName = computed(() => {
     if (props.value.loading) {
-      return loadingIcon
+      return ''
     }
 
     return props.value.trailingIcon || props.value.icon