From 6a76fa03174f7f8bed38f2ebcc9e28fa4822fcc0 Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Tue, 9 Jul 2024 15:06:03 +0530
Subject: [PATCH] Improved: added spinner to be shown while fetching pickers
 (#611)

---
 src/components/EditPickersModal.vue | 15 +++++++++++++--
 src/locales/en.json                 |  1 +
 src/locales/es.json                 |  1 +
 src/locales/ja.json                 |  1 +
 src/views/AssignPickerModal.vue     | 14 ++++++++++++--
 5 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/components/EditPickersModal.vue b/src/components/EditPickersModal.vue
index 002977a0..82ae7efe 100644
--- a/src/components/EditPickersModal.vue
+++ b/src/components/EditPickersModal.vue
@@ -21,7 +21,12 @@
 
     <ion-list>
       <ion-list-header>{{ translate("Staff") }}</ion-list-header>
-      <div class="ion-padding" v-if="!pickers.length">
+
+      <div v-if="isLoading" class="empty-state">
+        <ion-spinner name="crescent" />
+        <ion-label>{{ translate("Fetching pickers") }}</ion-label>
+      </div>
+      <div class="empty-state" v-if="!pickers.length">
         {{ 'No picker found' }}
       </div>
       <div v-else>
@@ -62,6 +67,7 @@ import {
   IonListHeader,
   IonRow,
   IonSearchbar,
+  IonSpinner,
   modalController,
   alertController
 } from "@ionic/vue";
@@ -93,13 +99,15 @@ export default defineComponent({
     IonListHeader,
     IonRow,
     IonSearchbar,
+    IonSpinner
   },
   data () {
     return {
       selectedPickers: [] as any,
       queryString: '',
       pickers: [] as any,
-      editedPicklist: {} as any
+      editedPicklist: {} as any,
+      isLoading: false
     }
   },
   async mounted() {
@@ -121,6 +129,8 @@ export default defineComponent({
       }
     },
     async findPickers(pickerIds?: Array<any>) {
+      this.isLoading = true;
+
       let inputFields = {}
       this.pickers = []
 
@@ -183,6 +193,7 @@ export default defineComponent({
       } catch (err) {
         logger.error('Failed to fetch the pickers information or there are no pickers available', err)
       }
+      this.isLoading = false;
     },
     async confirmSave() {
       const message = translate("Replace current pickers with new selection?");
diff --git a/src/locales/en.json b/src/locales/en.json
index abb36e14..5faa81e4 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -188,6 +188,7 @@
   "Failed to update variance type.": "Failed to update variance type.",
   "Fetching time zones": "Fetching time zones",
   "Fetching order information...": "Fetching order information...",
+  "Fetching pickers": "Fetching pickers",
   "Field mapping name": "Field mapping name",
   "File downloaded successfully": "File downloaded successfully",
   "File uploaded successfully": "File uploaded successfully",
diff --git a/src/locales/es.json b/src/locales/es.json
index 97b39dfd..82952391 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -184,6 +184,7 @@
   "Failed to update tracking code settings.": "Failed to update tracking code settings.",
   "Failed to update variance type.": "Failed to update variance type.",
   "Fetching order information...": "Obteniendo información del pedido...",
+  "Fetching pickers": "Fetching pickers",
   "Field mapping name": "Nombre del mapeo de campos",
   "File downloaded successfully": "Archivo descargado con éxito",
   "File uploaded successfully": "Archivo cargado con éxito",
diff --git a/src/locales/ja.json b/src/locales/ja.json
index 7f88e901..95330567 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -188,6 +188,7 @@
   "Failed to update variance type.": "変動タイプの更新に失敗しました。",
   "Fetching time zones": "タイムゾーンの取得中",
   "Fetching order information...": "注文情報の取得中...",
+  "Fetching pickers": "Fetching pickers",
   "Field mapping name": "フィールドマッピング名",
   "File downloaded successfully": "ファイルが正常にダウンロードされました",
   "File uploaded successfully": "ファイルが正常にアップロードされました",
diff --git a/src/views/AssignPickerModal.vue b/src/views/AssignPickerModal.vue
index 402532e9..cc2f5cb7 100644
--- a/src/views/AssignPickerModal.vue
+++ b/src/views/AssignPickerModal.vue
@@ -23,7 +23,11 @@
       <!-- TODO: added click event on the item as when using the ionChange event then it's getting
       called every time the v-for loop runs and then removes or adds the currently rendered picker
       -->
-      <div class="ion-padding" v-if="!pickers.length">{{ 'No picker found' }}</div>
+      <div v-if="isLoading" class="empty-state">
+        <ion-spinner name="crescent" />
+        <ion-label>{{ translate("Fetching pickers") }}</ion-label>
+      </div>
+      <div class="empty-state" v-else-if="!pickers.length">{{ "No picker found" }}</div>
       <div v-else>
         <ion-item v-for="(picker, index) in pickers" :key="index" @click="selectPicker(picker.id)">
           <ion-checkbox :checked="isPickerSelected(picker.id)">
@@ -61,6 +65,7 @@ import {
   IonListHeader,
   IonRow,
   IonSearchbar,
+  IonSpinner,
   IonTitle,
   IonToolbar,
   modalController } from "@ionic/vue";
@@ -93,6 +98,7 @@ export default defineComponent({
     IonListHeader,
     IonRow,
     IonSearchbar,
+    IonSpinner,
     IonTitle,
     IonToolbar,
   },
@@ -106,7 +112,8 @@ export default defineComponent({
     return {
       selectedPickers: [],
       queryString: '',
-      pickers: []
+      pickers: [],
+      isLoading: false
     }
   },
   props: ["order"], // if we have order in props then create picklist for this single order only
@@ -182,6 +189,8 @@ export default defineComponent({
       emitter.emit("dismissLoader")
     },
     async findPickers() {
+      this.isLoading = true;
+
       let inputFields = {}
       this.pickers = []
 
@@ -238,6 +247,7 @@ export default defineComponent({
       } catch (err) {
         logger.error('Failed to fetch the pickers information or there are no pickers available', err)
       }
+      this.isLoading = false
     }
   },
   async mounted() {