Merge pull request #306 from Ritika-Patel08/fixed-timezone-modal

Implemented: Spinner in timezone modal so users can see that data is being fetched
hotwax · Feb 21, 2024 · 9cb9db2 · 9cb9db2
2 parents f606356 + d55f2ec
commit 9cb9db2
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -30,6 +30,7 @@
   "Failed to update product identifier preference": "Failed to update product identifier preference",
   "facility location": "facility location",
   "Facility locations were not found corresponding to destination facility of return shipment. Please add facility locations to avoid receive return shipment failure.": "Facility locations were not found corresponding to destination facility of return shipment. Please add facility locations to avoid receive return shipment failure.",
+  "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/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>{{ translate("No time zone found")}}</p>
+    <div class="empty-state" v-if="isLoading">
+      <ion-item lines="none">
+        <ion-spinner color="secondary" name="crescent" slot="start" />
+          {{ translate("Fetching time zones") }}
+      </ion-item>
+    </div>
+    <div class="empty-state" v-else-if="filteredTimeZones.length === 0">
+      <p>{{ translate("No time zone found") }}</p>
     </div>
 
     <!-- Timezones -->
@@ -54,6 +60,7 @@ import {
   IonRadioGroup,
   IonRadio,
   IonSearchbar,
+  IonSpinner,
   IonTitle,
   IonToolbar,
   modalController,
@@ -82,6 +89,7 @@ export default defineComponent({
     IonRadioGroup,
     IonRadio,
     IonSearchbar,
+    IonSpinner,
     IonTitle,
     IonToolbar 
   },
@@ -90,7 +98,8 @@ export default defineComponent({
       queryString: '',
       filteredTimeZones: [],
       timeZones: [],
-      timeZoneId: ''
+      timeZoneId: '',
+      isLoading: false
     }
   },
   methods: {
@@ -127,6 +136,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
@@ -135,6 +145,7 @@ export default defineComponent({
         });
         this.findTimeZone();
       }
+      this.isLoading = false;
     },
     async selectSearchBarText(event: any) {
       const element = await event.target.getInputElement()
@@ -155,7 +166,8 @@ export default defineComponent({
     return {
       close,
       save,
-      store
+      store,
+      translate
     };
   }
 });