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

…rolling(#289)
hotwax · Apr 20, 2024 · 51ea33b · 51ea33b
1 parent 714054b
commit 51ea33b
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/src/components/ProductFilterModal.vue b/src/components/ProductFilterModal.vue
@@ -29,7 +29,7 @@
         <ion-icon :icon="checkmarkOutline" />
       </ion-fab-button>
     </ion-fab>
-    <ion-infinite-scroll @ionInfinite="loadMoreTags($event)" threshold="100px" v-show="isScrollingEnabled && isScrollable" ref="infiniteScrollRef">
+    <ion-infinite-scroll @ionInfinite="loadMoreTags($event)" threshold="100px" v-show="isScrollable" ref="infiniteScrollRef">
       <ion-infinite-scroll-content loading-spinner="crescent" :loading-text="$t('Loading')"/>
     </ion-infinite-scroll>
   </ion-content>
@@ -150,6 +150,10 @@ export default defineComponent({
       }
     },
     async loadMoreTags(event: any){
+       // Added this check here as if added on infinite-scroll component the Loading content does not gets displayed
+       if(!(this.isScrollingEnabled && this.isScrollable)) {
+        await event.target.complete();
+      }
       this.getTags(
         undefined,
         Math.ceil(this.facetOptions.length / process.env.VUE_APP_VIEW_SIZE).toString() 

diff --git a/src/views/SelectProduct.vue b/src/views/SelectProduct.vue
@@ -142,7 +142,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="loadMoreProducts($event)" threshold="100px" v-show="isScrollingEnabled && isScrollable" ref="infiniteScrollRef">
+          <ion-infinite-scroll @ionInfinite="loadMoreProducts($event)" threshold="100px" v-show="isScrollable" ref="infiniteScrollRef">
             <ion-infinite-scroll-content loading-spinner="crescent" :loading-text="$t('Loading')"/>
           </ion-infinite-scroll>
         </main>
@@ -354,6 +354,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.isScrollable)) {
+        await event.target.complete();
+      }
       this.getProducts(
         undefined,
         Math.ceil(this.products.list.length / process.env.VUE_APP_VIEW_SIZE).toString()