From 643bdd52c8a9d5c05a84a5b31d14551a66e5095d Mon Sep 17 00:00:00 2001
From: Ritika-Patel08 <ritikapatel8870@gmail.com>
Date: Thu, 1 Feb 2024 19:43:32 +0530
Subject: [PATCH 1/2] Implemented: Spinner in timezone modal so users can see
 that data is being fetched

---
 src/locales/en.json         |  1 +
 src/theme/variables.css     | 19 ++++++++++++++++++-
 src/views/TimezoneModal.vue | 17 ++++++++++++++---
 3 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index b3b4dca..bfce5d7 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -18,6 +18,7 @@
   "Error getting preferred product store.": "Error getting preferred product store.",
   "Error getting user profile.": "Error getting user profile.",
   "Facility": "Facility",
+  "Fetching time zones": "Fetching time zones",
   "Filters": "Filters",
   "Go to OMS": "Go to OMS",
   "Go to Launchpad": "Go to Launchpad",
diff --git a/src/theme/variables.css b/src/theme/variables.css
index f58eda4..8af964c 100644
--- a/src/theme/variables.css
+++ b/src/theme/variables.css
@@ -260,4 +260,21 @@ img {
   ion-item {
     --border-color: var(--ion-color-medium)
   }
-} 
\ No newline at end of file
+} 
+
+.empty-state {
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+}
+
+.empty-state > img {
+  object-fit: contain;
+}
+
+.empty-state > p {
+  text-align: center;
+}
\ No newline at end of file
diff --git a/src/views/TimezoneModal.vue b/src/views/TimezoneModal.vue
index c801eb0..91fd3f4 100644
--- a/src/views/TimezoneModal.vue
+++ b/src/views/TimezoneModal.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()

From bfdf8b0e161bfeefd06e00d8e0abafcccc6efd5b Mon Sep 17 00:00:00 2001
From: Ritika-Patel08 <ritikapatel8870@gmail.com>
Date: Fri, 2 Feb 2024 16:40:32 +0530
Subject: [PATCH 2/2] Improved: sequence of empty-state styling code in
 variable.css

---
 src/theme/variables.css | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/theme/variables.css b/src/theme/variables.css
index 8af964c..077a5c9 100644
--- a/src/theme/variables.css
+++ b/src/theme/variables.css
@@ -248,20 +248,6 @@ img {
   object-fit: contain;
 }
 
-@media (prefers-color-scheme: dark) {
-  ion-chip > ion-icon {
-    color: var(--ion-color-dark);
-  }
-
-  .chip-outline {
-    border-color: var(--ion-color-dark);
-  }
-
-  ion-item {
-    --border-color: var(--ion-color-medium)
-  }
-} 
-
 .empty-state {
   max-width: 100%;
   display: flex;
@@ -277,4 +263,18 @@ img {
 
 .empty-state > p {
   text-align: center;
+}
+
+@media (prefers-color-scheme: dark) {
+  ion-chip > ion-icon {
+    color: var(--ion-color-dark);
+  }
+
+  .chip-outline {
+    border-color: var(--ion-color-dark);
+  }
+
+  ion-item {
+    --border-color: var(--ion-color-medium)
+  }
 }
\ No newline at end of file