added submit guard to manage groups

ui/src/components/roles/addMember.vue

@@ -13,6 +13,7 @@ import Button from '../ui/button/Button.vue';
 import InputGroup from '../ui/input-group/InputGroup.vue';
 import InputGroupAddon from '../ui/input-group/InputGroupAddon.vue';
 import { SearchIcon } from 'lucide-vue-next';
+import Spinner from '../ui/spinner/Spinner.vue';
 
 const props = defineProps<{
     allMembers: MemberLight[],
@@ -43,8 +44,11 @@ function openDialog() {
     showAddMemberDialog.value = true;
 }
 
-
+const submitting = ref(false);
 async function handleAddMember() {
+    //catch double submit
+    if (submitting.value) return;
+    submitting.value = true;
     //guard
     if (memberToAdd.value == null)
         return;
@@ -52,6 +56,7 @@ async function handleAddMember() {
     await addMemberToRole(memberToAdd.value.id, props.role.id);
     emit('submit');
     showAddMemberDialog.value = false;
+    submitting.value = false;
 }
 
 </script>
@@ -94,8 +99,11 @@ async function handleAddMember() {
                 <Button variant="secondary" @click="showAddMemberDialog = false">
                     Cancel
                 </Button>
-                <Button :disabled="!memberToAdd" @click="handleAddMember">
-                    Add
+                <Button :disabled="!memberToAdd || submitting" @click="handleAddMember">
+                    <span class="flex items-center gap-2" v-if="submitting">
+                        <Spinner></Spinner> Add
+                    </span>
+                    <span v-else>Add</span>
                 </Button>
             </DialogFooter>
         </DialogContent>