Add spinner to organization creation in work experiences (#2683)

frontend/src/modules/organization/components/shared/organization-select.vue

@@ -3,15 +3,18 @@
     v-model="form"
     :fetch-fn="fetchOrganizations"
     :create-fn="createOrganization"
-    placeholder="Select  organization"
+    :placeholder="isCreatingOrganization ? 'Creating organization...' : 'Select organization'"
     input-class="organization-input"
     :create-if-not-found="true"
     :in-memory-filter="false"
     :clearable="false"
     class="w-full"
     :teleported="false"
   >
-    <template v-if="form && (form.displayName || form.name)" #prefix>
+    <template v-if="isCreatingOrganization" #prefix>
+      <lf-spinner size="1rem" class="mr-2 text-black" />
+    </template>
+    <template v-else-if="form && (form.displayName || form.name)" #prefix>
       <div class="flex items-center">
         <lf-avatar
           :name="form.displayName || form.name"
@@ -52,7 +55,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { OrganizationService } from '@/modules/organization/organization-service';
 import { Organization } from '@/modules/organization/types/Organization';
 import LfAvatar from '@/ui-kit/avatar/Avatar.vue';
@@ -61,6 +64,7 @@ import LfProjectGroupsTags from '@/shared/modules/project-groups/components/proj
 import AppAutocompleteOneInput from '@/shared/form/autocomplete-one-input.vue';
 import { storeToRefs } from 'pinia';
 import { useLfSegmentsStore } from '@/modules/lf/segments/store';
+import LfSpinner from '@/ui-kit/spinner/Spinner.vue';
 
 const props = defineProps<{
   modelValue: Organization | null,
@@ -70,6 +74,8 @@ const emit = defineEmits<{(e: 'update:modelValue', value: Organization | null):
 
 const { selectedProjectGroup } = storeToRefs(useLfSegmentsStore());
 
+const isCreatingOrganization = ref<boolean>(false);
+
 const form = computed<Organization | null>({
   get() {
     return props.modelValue;
@@ -88,22 +94,29 @@ const fetchOrganizations = async ({ query } : {
   segments: [selectedProjectGroup.value?.id],
 });
 
-const createOrganization = (value: string) => OrganizationService.create({
-  name: value,
-  attributes: {
-    name: {
-      default: value,
-      custom: [value],
+const createOrganization = (value: string) => {
+  isCreatingOrganization.value = true;
+
+  return OrganizationService.create({
+    name: value,
+    attributes: {
+      name: {
+        default: value,
+        custom: [value],
+      },
     },
-  },
-})
-  .then((newOrganization) => ({
-    id: newOrganization.id,
-    label: newOrganization.displayName || newOrganization.name,
-    displayName: newOrganization.displayName || newOrganization.name,
-    name: newOrganization.displayName || newOrganization.name,
-  }))
-  .catch(() => null);
+  })
+    .then((newOrganization) => ({
+      id: newOrganization.id,
+      label: newOrganization.displayName || newOrganization.name,
+      displayName: newOrganization.displayName || newOrganization.name,
+      name: newOrganization.displayName || newOrganization.name,
+    }))
+    .catch(() => null)
+    .finally(() => {
+      isCreatingOrganization.value = false;
+    });
+};
 
 onMounted(() => {
   fetchOrganizations({ query: '' });