Initial spinner implementation.

src/common-components/textbox-question/textbox-question.vue

@@ -36,7 +36,7 @@
                 :maxlength="maxLength ? maxLength : '999'"
                 @focus="$emit('focus', $event.target.value)" />
             <button v-if="includeSearchIcon" type="submit" aria-label="Search button" />
-            <label class="camera-icon-input" v-if="includeCameraIcon">
+            <label class="camera-icon-input" v-show="includeCameraIcon && !isLoading">
                 <input
                     type="file"
                     id="vin-input"
@@ -44,6 +44,10 @@
                     aria-label="Camera icon/button"
                     @change="submitImage" />
             </label>
+            <loader
+                v-show="includeCameraIcon && isLoading"
+                loaderColor="blue"
+                class="loading-icon"></loader>
         </div>
         <div v-show="errorMessage" class="row my-2 form-test-error">
             <span class="d-inline-flex mt-0" role="alert">{{ errorMessage }}</span>
@@ -54,6 +58,8 @@
 <script>
 import { useField, validate } from "vee-validate";
 import { storeActions } from "@/constants/store-actions";
+import loader from "@/ux-components/loader/loader.vue";
+import { ref } from "vue";
 
 export default {
     name: "textbox-question",
@@ -89,6 +95,7 @@ export default {
         const propsClone = Object.assign({}, props);
         const modelValue = propsClone.modelValue;
         let initialValue;
+        let isLoading = ref(false);
 
         switch (typeof modelValue) {
             case "number":
@@ -118,10 +125,12 @@ export default {
             validate,
             meta,
             errors,
+            isLoading,
         };
     },
     methods: {
         async submitImage(e) {
+            this.isLoading = true;
             await this.dispatchStoreAction(storeActions.LOOKUP_VIN_BY_IMAGE, e.target.files[0])
                 .then(async (response) => {
                     this.value = response.data.length > 0 ? response.data[0] : "";
@@ -134,6 +143,7 @@ export default {
                 .catch((error) => {
                     this.$emit("imageLookupError");
                 });
+            this.isLoading = false;
             e.target.value = null;
         },
     },
@@ -182,6 +192,9 @@ export default {
             }
         },
     },
+    components: {
+        loader,
+    },
 };
 </script>
 
@@ -238,6 +251,13 @@ export default {
                     }
                 }
             }
+
+            .loading-icon {
+                position: absolute;
+                top: 50%;
+                transform: translateY(-50%);
+                right: 1.5rem;
+            }
         }
     }
     input {