Improved: added spinner to be shown while fetching pickers (#611)

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?");

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",

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",

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": "ファイルが正常にアップロードされました",

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() {