feat: adding initial loading info to ac and fetcher

frontend/src/components/DataFetcher.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useFetchTo } from '@/services/ForestClientService'
-import { ref, watch } from 'vue'
+import { ref, watch, computed } from 'vue'
 
 const props = defineProps<{
   url: string
@@ -14,8 +14,12 @@ const props = defineProps<{
 const content = ref<any>(props.initValue)
 
 const initialUrlValue = props.url
+const searchURL = computed(() => props.url)
 
-const fetchContent = () => useFetchTo(props.url, content, props.params)
+const { loading, error, fetch } = useFetchTo(searchURL, content, {
+  skip: true,
+  ...props.params
+})
 
 const calculateStringDifference = (
   initial: string,
@@ -29,22 +33,21 @@ const calculateStringDifference = (
 
 //If initial fetch is required, fetch
 if (props.initFetch) {
-  fetchContent()
+  fetch()
 }
 
-//If there is a watcher, watch for changes
-
+//Watch for changes in the url, and if the difference is greater than the min length, fetch
 watch(
   () => props.url,
   () => {
     if (
       calculateStringDifference(initialUrlValue, props.url) >= props.minLength
     ) {
-      fetchContent()
+      fetch()
     }
   }
 )
 </script>
 <template>
-  <slot :content="content"></slot>
+  <slot :content="content" :loading="loading" :error="error"></slot>
 </template>

frontend/src/components/forms/AutoCompleteInputComponent.vue

@@ -22,7 +22,8 @@
         autoCompleteVisible && selectedValue.length > 2 && contents.length > 0
       "
     >
-      <div class="autocomplete-items-ct">
+      <div class="autocomplete-items-ct" v-if="loading">Loading...</div>
+      <div class="autocomplete-items-ct" v-else>
         <div
           v-for="item in contents"
           :key="item.code"
@@ -53,6 +54,7 @@ const props = defineProps<{
   contents: Array<BusinessSearchResult>
   validations: Array<Function>
   errorMessage?: string
+  loading?: boolean
 }>()
 
 //Events we emit during component lifecycle