Added loader

Author: mugetsu

components/Search/index.vue

@@ -50,11 +50,16 @@
           @focus="focusedButton = true"
           @blur="focusedButton = false"
           @click="onSearch">
-          <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
-            width="30" height="30"
-            viewBox="0 0 172 172"
-            style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#ffffff"><path d="M74.53333,17.2c-31.59642,0 -57.33333,25.73692 -57.33333,57.33333c0,31.59642 25.73692,57.33333 57.33333,57.33333c13.73998,0 26.35834,-4.87915 36.24766,-12.97839l34.23203,34.23203c1.43802,1.49778 3.5734,2.10113 5.5826,1.57735c2.0092,-0.52378 3.57826,-2.09284 4.10204,-4.10204c0.52378,-2.0092 -0.07957,-4.14458 -1.57735,-5.5826l-34.23203,-34.23203c8.09924,-9.88932 12.97839,-22.50768 12.97839,-36.24766c0,-31.59642 -25.73692,-57.33333 -57.33333,-57.33333zM74.53333,28.66667c25.39937,0 45.86667,20.4673 45.86667,45.86667c0,25.39937 -20.46729,45.86667 -45.86667,45.86667c-25.39937,0 -45.86667,-20.46729 -45.86667,-45.86667c0,-25.39937 20.4673,-45.86667 45.86667,-45.86667z"></path></g></g>
-          </svg>
+          <template v-if="isLoading">
+            <div class="loader" />
+          </template>
+          <template v-else>
+            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+              width="30" height="30"
+              viewBox="0 0 172 172"
+              style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#ffffff"><path d="M74.53333,17.2c-31.59642,0 -57.33333,25.73692 -57.33333,57.33333c0,31.59642 25.73692,57.33333 57.33333,57.33333c13.73998,0 26.35834,-4.87915 36.24766,-12.97839l34.23203,34.23203c1.43802,1.49778 3.5734,2.10113 5.5826,1.57735c2.0092,-0.52378 3.57826,-2.09284 4.10204,-4.10204c0.52378,-2.0092 -0.07957,-4.14458 -1.57735,-5.5826l-34.23203,-34.23203c8.09924,-9.88932 12.97839,-22.50768 12.97839,-36.24766c0,-31.59642 -25.73692,-57.33333 -57.33333,-57.33333zM74.53333,28.66667c25.39937,0 45.86667,20.4673 45.86667,45.86667c0,25.39937 -20.46729,45.86667 -45.86667,45.86667c-25.39937,0 -45.86667,-20.46729 -45.86667,-45.86667c0,-25.39937 20.4673,-45.86667 45.86667,-45.86667z"></path></g></g>
+            </svg>
+          </template>
         </button>
       </div>
       <ul ref="dropdown" class="dropdown-menu">
@@ -120,7 +125,8 @@ export default {
       hasSelected: false,
       focusedInput: false,
       focusedSelect: false,
-      focusedButton: false
+      focusedButton: false,
+      isLoading: false
     }
   },
   methods: {
@@ -137,7 +143,7 @@ export default {
           if (this.isProvinceFocus) {
             this.$refs.provinces.focus()
             this.locationId = ""
-""}
+          }
         })
         this.$gtag('event', 'enter', {
           event_category: 'input',
@@ -190,16 +196,18 @@ export default {
     },
     onSearch() {
       if (this.locationId) {
-      this.$store
-        .dispatch('getOverviewByCountry', this.locationId)
-        .then(_ => {
-          this.$emit('search')
-          this.$gtag('event', 'click', {
-            event_category: 'search',
-            event_label: 'search click',
-            value: this.locationId
+        this.isLoading = true
+        this.$store
+          .dispatch('getOverviewByCountry', this.locationId)
+          .then(_ => {
+            this.$emit('search')
+            this.$gtag('event', 'click', {
+              event_category: 'search',
+              event_label: 'search click',
+              value: this.locationId
+            })
+            this.isLoading = false
           })
-        })
       }
     },
     onSelectFocus(e) {
@@ -410,5 +418,52 @@ export default {
       }
     }
   }
+
+  .loader {
+    position: relative;
+    border-radius: 50%;
+    margin: 0;
+    width: 24px;
+    height: 24px;
+    font-size: 10px;
+    background: #ffffff;
+    background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+    animation: loader 1.4s infinite linear;
+    transform: translateZ(0);
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      border-radius: 100% 0 0 0;
+      width: 50%;
+      height: 50%;
+      background: #ffffff;
+    }
+
+    &:after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      border-radius: 50%;
+      margin: auto;
+      width: 75%;
+      height: 75%;
+      background: #3232ff;
+    }
+  }
+}
+
+@keyframes loader {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 </style>