From 4856712380ee1f726b28942eb0b072845275b710 Mon Sep 17 00:00:00 2001
From: Ritika-Patel08 <ritikapatel8870@gmail.com>
Date: Mon, 29 Jan 2024 19:47:08 +0530
Subject: [PATCH] Spinner in timezone modal so users can see that data is being
 fetched

---
 src/i18n/locales/en.json     |  1 +
 src/views/timezone-modal.vue | 17 ++++++++++++++---
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 4b26359c..f3c4a64a 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -66,6 +66,7 @@
     "Excluded ATP": "Excluded ATP",
     "from date": "from date",
     "Failed to update configuration": "Failed to update configuration",
+    "Fetching time zones": "Fetching time zones",
     "Go to Launchpad": "Go to Launchpad",
     "Go to OMS": "Go to OMS",
     "History": "History",
diff --git a/src/views/timezone-modal.vue b/src/views/timezone-modal.vue
index c801eb01..91fd3f41 100644
--- a/src/views/timezone-modal.vue
+++ b/src/views/timezone-modal.vue
@@ -15,8 +15,14 @@
 
   <ion-content class="ion-padding">
     <!-- Empty state -->
-    <div class="empty-state" v-if="filteredTimeZones.length === 0">
-      <p>{{ $t("No time zone found")}}</p>
+    <div class="empty-state" v-if="isLoading">
+      <ion-item lines="none">
+        <ion-spinner color="secondary" name="crescent" slot="start" />
+        {{ $t("Fetching time zones") }}
+      </ion-item>
+    </div>
+    <div class="empty-state" v-else-if="filteredTimeZones.length === 0">
+      <p>{{ $t("No time zone found") }}</p>
     </div>
 
     <!-- Timezones -->
@@ -54,6 +60,7 @@ import {
   IonRadioGroup,
   IonRadio,
   IonSearchbar,
+  IonSpinner,
   IonTitle,
   IonToolbar,
   modalController,
@@ -81,6 +88,7 @@ export default defineComponent({
     IonRadioGroup,
     IonRadio,
     IonSearchbar,
+    IonSpinner,
     IonTitle,
     IonToolbar 
   },
@@ -89,7 +97,8 @@ export default defineComponent({
       queryString: '',
       filteredTimeZones: [],
       timeZones: [],
-      timeZoneId: ''
+      timeZoneId: '',
+      isLoading: false
     }
   },
   methods: {
@@ -126,6 +135,7 @@ export default defineComponent({
       });
     },
     async getAvailableTimeZones() {
+      this.isLoading = true;
       const resp = await UserService.getAvailableTimeZones()
       if(resp.status === 200 && !hasError(resp)) {
         // We are filtering valid the timeZones coming with response here
@@ -134,6 +144,7 @@ export default defineComponent({
         });
         this.findTimeZone();
       }
+      this.isLoading = false;
     },
     async selectSearchBarText(event: any) {
       const element = await event.target.getInputElement()