From 3fbdb39f2cdc93bb5cb7dffa44e42d9ccc3c4d4d Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Mon, 30 Dec 2024 12:10:20 +0530
Subject: [PATCH] Improved: showing spinner while searching product in
 matchProduct modal (#563)

---
 src/components/MatchProductModal.vue | 13 +++++++++++--
 src/locales/en.json                  |  2 ++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/MatchProductModal.vue b/src/components/MatchProductModal.vue
index 779620c2..0850bfae 100644
--- a/src/components/MatchProductModal.vue
+++ b/src/components/MatchProductModal.vue
@@ -12,7 +12,12 @@
   <ion-content>
     <ion-searchbar v-model="queryString" :placeholder="translate('Search product')" @keyup.enter="handleSearch" />
 
-    <template v-if="products.length">
+    <div v-if="isLoading" class="empty-state">
+      <ion-spinner name="crescent" />
+      <ion-label>{{ translate("Searching for", { queryString }) }}</ion-label>
+    </div>
+
+    <template v-else-if="products.length">
       <ion-radio-group v-model="selectedProductId">
         <ion-item v-for="product in products" :key="product.productId">
           <ion-thumbnail slot="start">
@@ -30,7 +35,7 @@
     </template>
 
     <div v-else-if="queryString && isSearching && !products.length" class="empty-state">
-      <p>{{ translate("No product found") }}</p>
+      <p>{{ translate("No results found for", { queryString }) }}</p>
     </div>
     <div v-else class="empty-state">
       <img src="../assets/images/empty-state-add-product-modal.png" alt="empty-state" />
@@ -59,6 +64,7 @@ import {
   IonRadio,
   IonRadioGroup,
   IonSearchbar,
+  IonSpinner,
   IonThumbnail,
   IonTitle,
   IonToolbar,
@@ -81,6 +87,7 @@ const products = ref([]) as any;
 let queryString = ref('');
 const isSearching = ref(false);
 const selectedProductId = ref("") as Ref<string>;
+const isLoading = ref(false);
 
 async function handleSearch() {
   if(!queryString.value.trim()) {
@@ -91,6 +98,7 @@ async function handleSearch() {
   isSearching.value = true;
 }
 async function getProducts() {
+  isLoading.value = true;
   let productsList = [] as any;
   try {
     const resp = await ProductService.fetchProducts({
@@ -104,6 +112,7 @@ async function getProducts() {
     logger.error("Failed to fetch products", err)
   }
   products.value = productsList
+  isLoading.value = false;
 }
 function closeModal(payload = {}) {
   modalController.dismiss({ dismissed: true, ...payload });
diff --git a/src/locales/en.json b/src/locales/en.json
index 22206690..039b1295 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -181,6 +181,7 @@
   "No new file upload. Please try again": "No new file upload. Please try again",
   "No rejection history": "No rejection history",
   "No results found": "No results found",
+  "No results found for": "No results found for {queryString}",
   "No time zone found": "No time zone found",
   "NOT COUNTED": "NOT COUNTED",
   "not counted": "not counted",
@@ -250,6 +251,7 @@
   "Scanned item is not present in the count. To add new product move to All Segment.": "Scanned item is not present in the count. To add new product move to All Segment.",
   "Scan or search products": "Scan or search products",
   "Scanned quantity": "Scanned quantity",
+  "Searching for": "Searching for {queryString}",
   "selected": "selected",
   "Select": "Select",
   "Search facilities": "Search facilities",