feat(ui): transition for loading / icon button (#206)

packages/stage-ui/src/components/Button/Button.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
+import { BidirectionalTransition } from '../Misc'
+
 // Define button variants for better type safety and maintainability
 type ButtonVariant = 'primary' | 'secondary' | 'danger'
 
@@ -58,9 +60,16 @@ const baseClasses = computed(() => [
     :disabled="isDisabled"
     :class="baseClasses"
   >
-    <div class="flex flex-row items-center justify-center gap-2">
-      <div v-if="loading" class="i-lucide:loader-circle animate-spin" />
-      <div v-else-if="icon" :class="icon" />
+    <div class="flex flex-row items-center justify-center">
+      <BidirectionalTransition
+        from-class="opacity-0 mr-0! w-0!"
+        active-class="transition-[width,margin] ease-in-out overflow-hidden"
+      >
+        <div v-if="loading || icon" class="mr-2 w-4">
+          <div v-if="loading" class="i-svg-spinners:ring-resize h-4 w-4" />
+          <div v-else-if="icon" class="h-4 w-4" :class="icon" />
+        </div>
+      </BidirectionalTransition>
       <span v-if="label">{{ label }}</span>
       <slot v-else />
     </div>

packages/stage-ui/src/components/Misc/BidirectionalTransition.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+defineProps<{
+  fromClass?: string
+  activeClass?: string
+  toClass?: string
+}>()
+</script>
+
+<template>
+  <Transition
+    :enter-from-class="fromClass"
+    :enter-active-class="activeClass"
+    :enter-to-class="toClass"
+    :leave-from-class="toClass"
+    :leave-active-class="activeClass"
+    :leave-to-class="fromClass"
+  >
+    <slot />
+  </Transition>
+</template>

packages/stage-ui/src/components/Misc/index.ts

@@ -1,3 +1,4 @@
+export { default as BidirectionalTransition } from './BidirectionalTransition.vue'
 export { default as Collapsable } from './Collapsable.vue'
 export { default as Skeleton } from './Skeleton.vue'
 export * from './Steppers'