Implemented: Spinner in timezone modal so users can see that data is …

…being fetched
hotwax · Jan 31, 2024 · 1e99515 · 1e99515
1 parent cbfd353
commit 1e99515
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 4 deletions.
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -38,6 +38,7 @@
   "Failed": "Failed",
   "Failed to update some jobs": "Failed to update some jobs",
   "Failed to schedule service, hence other jobs are not updated": "Failed to schedule service, hence other jobs are not updated",
+  "Fetching time zones": "Fetching time zones",
   "Go to Launchpad": "Go to Launchpad",
   "Go to OMS": "Go to OMS",
   "History": "History",

diff --git a/src/theme/variables.css b/src/theme/variables.css
@@ -76,6 +76,23 @@ http://ionicframework.com/docs/theming/ */
   --ion-color-light-tint: #f5f6f9;
 }
 
+.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; 
+}
+
 @media (prefers-color-scheme: dark) {
   /*
    * Dark Colors

diff --git a/src/views/TimezoneModal.vue b/src/views/TimezoneModal.vue
@@ -14,9 +14,15 @@
   </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>
+     <!-- Empty state -->
+    <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: true
     }
   },
   methods: {
@@ -129,6 +138,7 @@ export default defineComponent({
       });
     },
     async getAvailableTimeZones() {
+      this.isLoading = true;
       UserService.getAvailableTimeZones().then((resp: any) => {
         if(resp.status === 200 && !hasError(resp)) {
           // We are filtering valid the timeZones coming with response here
@@ -137,6 +147,7 @@ export default defineComponent({
           });
           this.findTimeZone();
         }
+        //this.isLoading = false;
       })
     },
     selectSearchBarText(event: any) {