feat(front): add AsyncButton component for handling loading state during async operations

front/components/ui/button/AsyncButton.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { Button } from '@/components/ui/button'
+const isLoading = ref(false)
+
+const props = withDefaults(defineProps<{
+    disabled?: boolean
+    onClick?: (event?: Event) => Promise<void>
+}>(), {
+    disabled: false,
+    onClick: async () => {}
+})
+
+const handleClick = async (event?: Event) => {
+    if (isLoading.value) return
+    
+    isLoading.value = true
+    try {
+        await props.onClick?.(event)
+    }finally {
+        isLoading.value = false
+    }
+}
+</script>
+
+<template>
+    <Button :onClick="handleClick" :disabled="isLoading || disabled">
+        <slot />
+    </Button>
+</template>

front/components/ui/button/Button.vue

@@ -20,7 +20,7 @@ const props = withDefaults(defineProps<Props>(), {
     data-slot="button"
     :as="as"
     :as-child="asChild"
-    :class="cn(buttonVariants({ variant, size }), props.class)"
+    :class="cn(buttonVariants({ variant, size }), 'select-none', props.class)"
   >
     <slot />
   </Primitive>