Fixed: the case where loading label is not displayed when infinite sc…

…rolling(#289)
hotwax · Apr 19, 2024 · 9cf1ba1 · 9cf1ba1
1 parent 897b2fd
commit 9cf1ba1
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git a/src/views/catalog.vue b/src/views/catalog.vue
@@ -77,7 +77,7 @@
           </ion-item> -->
         </div>
 
-        <ion-infinite-scroll @ionInfinite="loadMoreProducts($event)" threshold="100px" v-show="isScrollingEnabled && isCatalogScrollable" ref="infiniteScrollRef">
+        <ion-infinite-scroll @ionInfinite="loadMoreProducts($event)" threshold="100px" v-show="isCatalogScrollable" ref="infiniteScrollRef">
           <ion-infinite-scroll-content loading-spinner="crescent" :loading-text="$t('Loading')" />
         </ion-infinite-scroll>
       </div>
@@ -214,6 +214,10 @@ export default defineComponent({
       }
     },
     async loadMoreProducts(event: any){
+      // Added this check here as if added on infinite-scroll component the Loading content does not gets displayed
+      if(!(this.isScrollingEnabled && this.isCatalogScrollable)) {
+        await event.target.complete();
+      }
       this.getCatalogProducts(
         undefined,
         Math.ceil(this.products.length / process.env.VUE_APP_VIEW_SIZE).toString()

diff --git a/src/views/orders.vue b/src/views/orders.vue
@@ -150,7 +150,7 @@
             If we do not define an extra variable and just use v-show to check for `isScrollable` then when coming back to the page infinite-scroll is called programatically.
             We have added an ionScroll event on ionContent to check whether the infiniteScroll can be enabled or not by toggling the value of isScrollingEnabled whenever the height < 0.
           -->
-        <ion-infinite-scroll @ionInfinite="loadMoreOrders($event)" threshold="100px" id="infinite-scroll" v-show="isScrollingEnabled && isScrolleable" ref="infiniteScrollRef">
+        <ion-infinite-scroll @ionInfinite="loadMoreOrders($event)" threshold="100px" id="infinite-scroll" v-show="isScrolleable" ref="infiniteScrollRef">
           <ion-infinite-scroll-content loading-spinner="crescent" :loading-text="$t('Loading')"></ion-infinite-scroll-content>
         </ion-infinite-scroll>
       </div>  
@@ -308,6 +308,10 @@ export default defineComponent({
       }
     },
     async loadMoreOrders(event: any) {
+      // Added this check here as if added on infinite-scroll component the Loading content does not gets displayed
+      if(!(this.isScrollingEnabled && this.isScrolleable)) {
+        await event.target.complete();
+      }
       this.query.viewIndex = Math.ceil(this.orders.length / process.env.VUE_APP_VIEW_SIZE);
       this.store.dispatch("order/updateQuery", { query: this.query}).then(async () => {
         await event.target.complete();

diff --git a/src/views/products.vue b/src/views/products.vue
@@ -38,7 +38,7 @@
           <ion-badge slot="end" color="success">{{ product.doclist.numFound }} {{ $t("pieces preordered") }}</ion-badge>
         </ion-item>
 
-        <ion-infinite-scroll @ionInfinite="loadMoreProducts($event)" threshold="100px" id="infinite-scroll"  v-show="isScrollingEnabled && isScrolleable" ref="infiniteScrollRef">
+        <ion-infinite-scroll @ionInfinite="loadMoreProducts($event)" threshold="100px" id="infinite-scroll"  v-show="isScrolleable" ref="infiniteScrollRef">
           <ion-infinite-scroll-content loading-spinner="crescent" :loading-text="$t('Loading')"></ion-infinite-scroll-content>
         </ion-infinite-scroll>
       </div>
@@ -131,6 +131,10 @@ export default defineComponent({
       }
     },
     async loadMoreProducts(event: any) {
+       // Added this check here as if added on infinite-scroll component the Loading content does not gets displayed
+       if(!(this.isScrollingEnabled && this.isScrolleable)) {
+        await event.target.complete();
+      }
       this.getProducts(
         undefined,
         Math.ceil(this.products.length / process.env.VUE_APP_VIEW_SIZE).toString()