feat: add loading state

src/components/IconButton.vue

@@ -1,10 +1,10 @@
 <template>
-  <b-button :to="to" v-bind="$attrs" class="icon-button d-inline-flex align-items-center px-2" :class="classList">
-    <PhosphorIcon v-if="iconLeft" :name="iconLeft" />
-    <v-slot
-      ><span v-if="!hideLabel" :class="{ 'ps-1': iconLeft, 'pe-1': iconRight }">{{ label }}</span></v-slot
-    >
-    <PhosphorIcon v-if="iconRight" :name="iconRight" :class="{ 'mx-1': !hideLabel }" />
+  <b-button :to="to" v-bind="buttonProps" class="icon-button d-inline-flex align-items-center" :class="classList">
+    <phosphor-icon v-if="iconLeft" :name="iconLeftOrLoading" :spin="loading" class="icon-button__icon-left" />
+    <span v-if="!hideLabel" class="icon-button__label">
+      <slot>{{ label }}</slot>
+    </span>
+    <phosphor-icon v-if="iconRight" :name="iconRightOrLoading" :spin="loading" class="icon-button__icon-right" />
   </b-button>
 </template>
 
@@ -36,12 +36,61 @@ const props = defineProps({
   },
   to: {
     type: Object
+  },
+  variant: {
+    type: String,
+    default: 'secondary'
+  },
+  size: {
+    type: String,
+    default: 'md'
+  },
+  block: {
+    type: Boolean
+  },
+  pill: {
+    type: Boolean
+  },
+  pressed: {
+    type: Boolean
+  },
+  tag: {
+    type: String,
+    default: 'button'
+  },
+  type: {
+    type: String,
+    default: 'button'
+  },
+  loading: {
+    type: Boolean
+  }
+})
+
+const classList = computed(() => {
+  return {
+    'icon-button--square': props.square,
+    'icon-button--loading': props.loading
   }
 })
 
-const classList = computed(() => ({
-  'icon-button--square': props.square
-}))
+const iconLeftOrLoading = computed(() => {
+  return props.loading ? 'circle-notch' : props.iconLeft
+})
+
+const iconRightOrLoading = computed(() => {
+  return props.loading ? 'circle-notch' : props.iconRight
+})
+
+const buttonProps = {
+  block: props.block,
+  pill: props.pill,
+  pressed: props.pressed,
+  size: props.size,
+  tag: props.tag,
+  type: props.type,
+  variant: props.variant
+}
 </script>
 
 <style lang="scss" scoped>
@@ -63,5 +112,26 @@ const classList = computed(() => ({
     width: calc(#{$btn-line-height * $btn-font-size-lg} + #{$btn-padding-y-lg * 2} + #{$btn-border-width} * 2);
     height: calc(#{$btn-line-height * $btn-font-size-lg} + #{$btn-padding-y-lg * 2} + #{$btn-border-width} * 2);
   }
+
+  &__icon-left ~ &__label {
+    margin-left: $spacer-xxs;
+  }
+
+  &__label ~ &__icon-right {
+    margin-left: $spacer-xxs;
+  }
+
+  &__icon-left,
+  &__icon-right {
+    height: $line-height-base * $btn-font-size;
+
+    .btn-sm & {
+      height: $line-height-base * $btn-font-size-sm;
+    }
+
+    .btn-sm & {
+      height: $line-height-base * $btn-font-size-lg;
+    }
+  }
 }
 </style>

src/stories/components/IconButtons.stories.js

@@ -16,12 +16,16 @@ export default {
     },
     pill: {
       control: { type: 'boolean' }
+    },
+    loading: {
+      control: { type: 'boolean' }
     }
   },
   args: {
     variant: 'primary',
     size: 'md',
-    pill: false
+    pill: false,
+    loading: false
   },
   render: (args) => ({
     components: {