chore: fixing loading image during api loading

bcgov · Jun 29, 2023 · 7d96400 · 7d96400
1 parent 16ecbec
commit 7d96400
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 6 deletions.
diff --git a/frontend/src/assets/global.css b/frontend/src/assets/global.css
@@ -154,3 +154,10 @@ hr {
 .wizard-mid-content {
   width: 50%;
 }
+
+.spinner-block {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  max-height: 0.5rem;
+}
diff --git a/frontend/src/components/forms/AutoCompleteInputComponent.vue b/frontend/src/components/forms/AutoCompleteInputComponent.vue
@@ -23,7 +23,7 @@
       "
     >
       <div class="autocomplete-items-ct" v-if="loading">
-        <bx-loading></bx-loading>
+        <bx-loading type="small"> </bx-loading>
       </div>
       <div class="autocomplete-items-ct" v-else>
         <div
@@ -85,15 +85,17 @@ const selectedValue = ref(props.modelValue)
 //This function emits the events on update
 const emitValueChange = (newValue: string): void => {
   const reference = props.contents.find((entry) => entry.name === newValue)
-  console.log(reference, newValue)
   emit('update:model-value', newValue)
   emit('empty', isEmpty(reference))
 }
 
 emit('empty', true)
 watch(
   () => props.modelValue,
-  () => (selectedValue.value = props.modelValue)
+  () => {
+    selectedValue.value = props.modelValue
+    validateInput(selectedValue.value)
+  }
 )
 watch([selectedValue], () => {
   validateInput(selectedValue.value)
@@ -125,7 +127,6 @@ const selectAutocompleteItem = (event: any) => {
   emit('update:selected-value', reference)
   autoCompleteVisible.value = false
 }
-validateInput(selectedValue.value)
 </script>
 <style scoped>
 .autocomplete {

diff --git a/frontend/src/pages/applyform/BusinessInformationWizardStep.vue b/frontend/src/pages/applyform/BusinessInformationWizardStep.vue
@@ -66,6 +66,7 @@ const autoCompleteUrl = computed(
 const showAutoCompleteInfo = ref<boolean>(false)
 const showGoodStandingError = ref<boolean>(false)
 const showDuplicatedError = ref<boolean>(false)
+const showDetailsLoading = ref<boolean>(false)
 const detailsData = ref(null)
 
 const toggleErrorMessages = (
@@ -110,11 +111,13 @@ watch([autoCompleteResult], () => {
     }
 
     //Also, we will load the backend data to fill all the other information as well
-    const { error } = useFetchTo(
+    const { error, loading: detailsLoading } = useFetchTo(
       `/api/clients/${autoCompleteResult.value.code}`,
       detailsData,
       config
     )
+
+    showDetailsLoading.value = true
     watch([error], () => {
       if (error.value.response.status === 409) toggleErrorMessages(null, true)
       if (error.value.response.status === 404) {
@@ -123,6 +126,11 @@ watch([autoCompleteResult], () => {
         emit('update:data', formData.value)
       }
     })
+
+    watch(
+      [detailsLoading],
+      () => (showDetailsLoading.value = detailsLoading.value)
+    )
   }
 })
 
@@ -195,14 +203,17 @@ watch([selectedOption], () => {
       :contents="content"
       :validations="[
         isNotEmpty,
-        isMinSize(3),
         submissionValidation('businessInformation.businessName')
       ]"
       :loading="loading"
       @update:selected-value="autoCompleteResult = $event"
       @update:model-value="validation.business = false"
     />
 
+    <div class="spinner-block" v-if="showDetailsLoading">
+      <bx-loading type="small"> </bx-loading>
+      <span>Loading client details...</span>
+    </div>
     <display-block-component
       kind="info"
       title="BC registered business name"