Merge pull request #445 from amansinghbais/#444

Improved: showing ion spinner until picker list is being fetched (#444)
hotwax · Oct 21, 2024 · c11efee · c11efee
2 parents ccb498a + 18f060f
commit c11efee
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 2 deletions.
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -46,6 +46,7 @@
   "Failed to update configuration": "Failed to update configuration",
   "Failed to print shipping label and packing slip": "Failed to print shipping label and packing slip",
   "Failed to update product store setting.": "Failed to update product store setting.",
+  "Fetching pickers": "Fetching pickers",
   "First name": "First name",
   "Generate packing slips": "Generate packing slips",
   "Generate shipping documents": "Generate shipping documents",

diff --git a/src/locales/es.json b/src/locales/es.json
@@ -44,6 +44,7 @@
   "Failed to update configuration": "No se pudo actualizar la configuración",
   "Failed to print shipping label and packing slip": "Error al imprimir la etiqueta de envío y la hoja de embalaje",
   "Failed to update product store setting.": "Failed to update product store setting.",
+  "Fetching pickers": "Fetching pickers",
   "First name": "Nombre",
   "Generate packing slips": "Generar documentos de embalaje",
   "Generate shipping documents": "Generar documentos de envío",

diff --git a/src/locales/ja.json b/src/locales/ja.json
@@ -44,6 +44,7 @@
   "Failed to update configuration": "設定の更新に失敗しました",
   "Failed to print shipping label and packing slip": "出荷ラベルと納品書の印刷に失敗しました。",
   "Failed to update product store setting.":"Failed to update product store setting.",
+  "Fetching pickers": "Fetching pickers",
   "First name": "名",
   "Generate packing slips": "内容明細票の作成",
   "Generate shipping documents": "出荷書類を生成する",

diff --git a/src/views/AssignPickerModal.vue b/src/views/AssignPickerModal.vue
@@ -13,7 +13,11 @@
   <ion-content ref="contentRef" :scroll-events="true" @ionScroll="enableScrolling()">
     <ion-searchbar v-model="queryString" @keyup.enter="queryString = $event.target.value; searchPicker()"/>
 
-    <div class="ion-text-center ion-margin-top" v-if="!availablePickers.length">{{ translate('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="!availablePickers.length">{{ translate('No picker found') }}</div>
 
     <ion-list v-else>
       <ion-list-header>{{ translate("Staff") }}</ion-list-header>
@@ -64,11 +68,13 @@ import {
   IonHeader,
   IonIcon,
   IonItem,
+  IonLabel,
   IonList,
   IonListHeader,
   IonRadio,
   IonRadioGroup,
   IonSearchbar,
+  IonSpinner,
   IonTitle,
   IonToolbar,
   IonInfiniteScroll,
@@ -94,11 +100,13 @@ export default defineComponent({
     IonHeader,
     IonIcon,
     IonItem,
+    IonLabel,
     IonList,
     IonListHeader,
     IonRadio,
     IonRadioGroup,
     IonSearchbar,
+    IonSpinner,
     IonTitle,
     IonToolbar,
     IonInfiniteScroll,
@@ -111,7 +119,8 @@ export default defineComponent({
       queryString: '',
       availablePickers: [],
       isScrollable: true,
-      isScrollingEnabled: false
+      isScrollingEnabled: false,
+      isLoading: false
     }
   },
   methods: {
@@ -155,6 +164,7 @@ export default defineComponent({
       });
     },
     async getPicker(vSize, vIndex) {
+      this.isLoading = true;
       let inputFields = {}
 
       if(this.queryString.length > 0) {
@@ -216,6 +226,7 @@ export default defineComponent({
         logger.error(translate('Something went wrong'))
       }
       this.isScrollable = this.availablePickers.length < total;
+      this.isLoading = false;
     }
   },
   async mounted() {