Implemented: Spinner in Timezone Model for Timezone Configuration (#210)

src/locales/en.json

@@ -37,6 +37,7 @@
   "Make sure you've reviewed the products and their counts before uploading them for review": "Make sure you've reviewed the products and their counts before uploading them for review",
   "No results found": "No results found",
   "No time zone found": "No time zone found",
+  "Fetching time zones":"Fetching time zones",
   "Ok": "Ok",
   "OMS": "OMS",
   "OMS instance": "OMS instance",

src/views/TimezoneModal.vue

@@ -2,44 +2,60 @@
   <ion-header>
     <ion-toolbar>
       <ion-buttons slot="start">
-        <ion-button @click="closeModal"> 
+        <ion-button @click="closeModal">
           <ion-icon :icon="close" />
         </ion-button>
       </ion-buttons>
       <ion-title>{{ $t("Select time zone") }}</ion-title>
     </ion-toolbar>
     <ion-toolbar>
-      <ion-searchbar @ionFocus="selectSearchBarText($event)" :placeholder="$t('Search time zones')"  v-model="queryString" @keyup.enter="queryString = $event.target.value; findTimeZone()" @keydown="preventSpecialCharacters($event)" />
+      <ion-searchbar @ionFocus="selectSearchBarText($event)" :placeholder="$t('Search time zones')" v-model="queryString"
+        @keyup.enter="queryString = $event.target.value; findTimeZone()" @keydown="preventSpecialCharacters($event)" />
     </ion-toolbar>
   </ion-header>
-
+
+
   <ion-content class="ion-padding">
     <!-- Empty state -->
-    <div class="empty-state" v-if="filteredTimeZones.length === 0">
-      <p>{{ $t("No time zone found")}}</p>
+    <div>
+      <div class="empty-state" v-if="loading && timeZones.length === 0">
+        <ion-item lines="none" color="none">
+
+          <ion-spinner class="center-spinner" color="secondary" name="crescent" slot="start" ></ion-spinner>
+          {{ $t("Fetching time zones") }}
+        </ion-item>
+      </div>
     </div>
-
+    <div v-if="!loading && filteredTimeZones.length === 0">
+      <div class="empty-state">
+        <p>{{ $t("No time zone found") }}</p>
+      </div>
+    </div>
+
     <!-- Timezones -->
     <div v-else>
       <ion-list>
         <ion-radio-group value="rd" v-model="timeZoneId">
           <ion-item :key="timeZone.id" v-for="timeZone in filteredTimeZones">
-            <ion-radio justify="start" label-placement="end" :value="timeZone.id">{{ timeZone.label }} ({{ timeZone.id }})</ion-radio>
+            <ion-radio justify="start" label-placement="end" :value="timeZone.id">{{ timeZone.label }} ({{ timeZone.id
+            }})</ion-radio>
           </ion-item>
         </ion-radio-group>
       </ion-list>
     </div>
-
+
+
     <ion-fab vertical="bottom" horizontal="end" slot="fixed">
       <ion-fab-button :disabled="!timeZoneId" @click="saveAlert">
         <ion-icon :icon="save" />
       </ion-fab-button>
     </ion-fab>
   </ion-content>
-</template>
-
-<script lang="ts">
-import { 
+ </template>
+
+
+ <script lang="ts">
+ import {
   IonButtons,
   IonButton,
   IonContent,
@@ -55,17 +71,19 @@ import {
   IonTitle,
   IonToolbar,
   modalController,
-  alertController } from "@ionic/vue";
-import { defineComponent } from "vue";
-import { close, save } from "ionicons/icons";
-import { useStore } from "@/store";
-import { UserService } from "@/services/UserService";
-import { hasError } from '@/utils'
-import { DateTime } from 'luxon';
-
-export default defineComponent({
+  alertController
+ } from "@ionic/vue";
+ import { defineComponent } from "vue";
+ import { close, save } from "ionicons/icons";
+ import { useStore } from "@/store";
+ import { UserService } from "@/services/UserService";
+ import { hasError } from '@/utils'
+ import { DateTime } from 'luxon';
+
+
+ export default defineComponent({
   name: "TimeZoneModal",
-  components: { 
+  components: {
     IonButtons,
     IonButton,
     IonContent,
@@ -79,14 +97,15 @@ export default defineComponent({
     IonRadio,
     IonSearchbar,
     IonTitle,
-    IonToolbar 
+    IonToolbar
   },
   data() {
     return {
       queryString: '',
       filteredTimeZones: [],
       timeZones: [],
-      timeZoneId: ''
+      timeZoneId: '',
+      loading: true
     }
   },
   methods: {
@@ -114,23 +133,26 @@ export default defineComponent({
     },
     preventSpecialCharacters($event: any) {
       // Searching special characters fails the API, hence, they must be omitted
-      if(/[`!@#$%^&*()_+\-=\\|,.<>?~]/.test($event.key)) $event.preventDefault();
+      if (/[`!@#$%^&*()_+\-=\\|,.<>?~]/.test($event.key)) $event.preventDefault();
     },
-    findTimeZone() { 
+    findTimeZone() {
       const queryString = this.queryString.toLowerCase();
       this.filteredTimeZones = this.timeZones.filter((timeZone: any) => {
         return timeZone.id.toLowerCase().match(queryString) || timeZone.label.toLowerCase().match(queryString);
       });
     },
     async getAvailableTimeZones() {
       const resp = await UserService.getAvailableTimeZones()
-      if(resp.status === 200 && !hasError(resp)) {
+      console.log(resp);
+
+      if (resp.status === 200 && !hasError(resp)) {
         // We are filtering valid the timeZones coming with response here
         this.timeZones = resp.data.filter((timeZone: any) => {
           return DateTime.local().setZone(timeZone.id).isValid;
         });
         this.findTimeZone();
       }
+      this.loading = false;
     },
     async selectSearchBarText(event: any) {
       const element = await event.target.getInputElement()
@@ -143,7 +165,7 @@ export default defineComponent({
       this.closeModal()
     }
   },
-  beforeMount () {
+  beforeMount() {
     this.getAvailableTimeZones();
   },
   setup() {
@@ -154,5 +176,6 @@ export default defineComponent({
       store
     };
   }
-});
-</script>
+ });
+ </script>
+