Merge pull request #2666 from Safelite/feature/CASH-1077v2

CASH-1077

src/layouts/service-location/shop-question/shop-question-popup.vue

@@ -31,6 +31,10 @@
                 :isRequired="false"
                 :validationRules="''" />
         </form>
+        <div v-show="isLoading" class="loader-wrapper">
+            <loader loaderColor="blue" loaderPosition="center" />
+        </div>
+        <div v-show="!isLoading">
             <alert
                 ref="alertInvalidZip"
                 v-if="displayInvalidZipAlert"
@@ -70,6 +74,7 @@
                         :aria-label="showMoreShopsLinkText" />
                 </div>
             </div>
+        </div>
     </modal>
 </template>
 
@@ -87,6 +92,7 @@ import { defineRule } from "vee-validate";
 import { required } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
 import baseMixin from "@/mixins/base-mixin.js";
+import loader from "@/ux-components/loader/loader";
 
 import { AppointmentTypeStrings } from "@/constants/schedule-constants";
 
@@ -109,6 +115,7 @@ export default {
             localShopProviderData: this.shopProviderDataFromParent,
             localSelectedProviderNumber: null,
             zipCodeData: null,
+            isLoading: false,
         };
     },
     props: {
@@ -160,6 +167,7 @@ export default {
         },
         isModalFooterButtonDisabled() {
             return (
+                this.isLoading ||
                 this.displayInvalidZipAlert ||
                 this.displayNoShopsAlert ||
                 !this.localSelectedProviderNumber
@@ -250,6 +258,13 @@ export default {
         },
         async onSearchZip(event) {
             event.preventDefault();
+            if (!this.localZipCode) {
+                this.zipCodeData = {
+                    isValid: false,
+                };
+                return;
+            }
+            this.isLoading = true;
             this.zipCodeData = await this.getZipCodeData(this.localZipCode, "service-location");
             // Add zipCode to zipCodeData as it does not come back from endpoint
             this.zipCodeData.zipCode = this.localZipCode;
@@ -271,8 +286,11 @@ export default {
                         this.localShopProviderData = result.data;
                         this.numberOfShopsToDisplay = 3;
                         this.updateShopsForZip();
+                        this.isLoading = false;
                     });
                 }
+            } else {
+                this.isLoading = false;
             }
         },
         updateShopsForZip() {
@@ -317,6 +335,7 @@ export default {
         serviceZipQuestion,
         buttonQuestion,
         alert,
+        loader,
     },
 };
 </script>
@@ -444,4 +463,10 @@ export default {
     display: block;
     width: 100%;
 }
+.loader-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    max-width: 100%;
+}
 </style>