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

…rolling(hotwax#289)
R-Sourabh · Apr 22, 2024 · be66cc2 · be66cc2
1 parent 66b7531
commit be66cc2
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 4 deletions.
diff --git a/src/views/Completed.vue b/src/views/Completed.vue
@@ -156,7 +156,7 @@
               </div>
             </div>
           </ion-card>
-          <ion-infinite-scroll @ionInfinite="loadMoreCompletedOrders($event)" threshold="100px" v-show="isScrollingEnabled && isCompletedOrderScrollable()" ref="infiniteScrollRef">
+          <ion-infinite-scroll @ionInfinite="loadMoreCompletedOrders($event)" threshold="100px" v-show="isCompletedOrderScrollable()" ref="infiniteScrollRef">
             <ion-infinite-scroll-content loading-spinner="crescent" :loading-text="translate('Loading')"/>
           </ion-infinite-scroll>
         </div>
@@ -310,6 +310,10 @@ export default defineComponent({
       }
     },
     async loadMoreCompletedOrders(event: any) {
+      // Added this check here as if added on infinite-scroll component the Loading content does not gets displayed
+      if (!(this.isScrollingEnabled && this.isCompletedOrderScrollable())) {
+        await event.target.complete();
+      }
       const completedOrdersQuery = JSON.parse(JSON.stringify(this.completedOrders.query))
       completedOrdersQuery.viewIndex++;
       await this.store.dispatch('order/updateCompletedOrderIndex', { ...completedOrdersQuery })

diff --git a/src/views/InProgress.vue b/src/views/InProgress.vue
@@ -218,7 +218,7 @@
               </div>
             </div>
           </ion-card>
-          <ion-infinite-scroll @ionInfinite="loadMoreInProgressOrders($event)" threshold="100px"  v-show="isScrollingEnabled && isInProgressOrderScrollable()" ref="infiniteScrollRef">
+          <ion-infinite-scroll @ionInfinite="loadMoreInProgressOrders($event)" threshold="100px"  v-show="isInProgressOrderScrollable()" ref="infiniteScrollRef">
             <ion-infinite-scroll-content loading-spinner="crescent" :loading-text="translate('Loading')"/>
           </ion-infinite-scroll>
         </div>
@@ -972,6 +972,10 @@ export default defineComponent({
       }
     },
     async loadMoreInProgressOrders(event: any) {
+      // Added this check here as if added on infinite-scroll component the Loading content does not gets displayed
+      if (!(this.isScrollingEnabled && this.isInProgressOrderScrollable())) {
+        await event.target.complete();
+      }
       const inProgressOrdersQuery = JSON.parse(JSON.stringify(this.inProgressOrders.query))
       inProgressOrdersQuery.viewIndex++;
       await this.store.dispatch('order/updateInProgressIndex', { ...inProgressOrdersQuery })

diff --git a/src/views/OpenOrders.vue b/src/views/OpenOrders.vue
@@ -123,7 +123,7 @@
             </div> -->
           </ion-card>
 
-          <ion-infinite-scroll @ionInfinite="loadMoreOpenOrders($event)" threshold="100px" v-show="isScrollingEnabled && isOpenOrdersScrollable()" ref="infiniteScrollRef">
+          <ion-infinite-scroll @ionInfinite="loadMoreOpenOrders($event)" threshold="100px" v-show="isOpenOrdersScrollable()" ref="infiniteScrollRef">
             <ion-infinite-scroll-content loading-spinner="crescent" :loading-text="translate('Loading')"/>
           </ion-infinite-scroll>
         </div>
@@ -252,6 +252,10 @@ export default defineComponent({
       }
     },
     async loadMoreOpenOrders(event: any) {
+      // Added this check here as if added on infinite-scroll component the Loading content does not gets displayed
+      if (!(this.isScrollingEnabled && this.isOpenOrdersScrollable())) {
+        await event.target.complete();
+      }
       const openOrdersQuery = JSON.parse(JSON.stringify(this.openOrders.query))
       openOrdersQuery.viewIndex++;
       await this.store.dispatch('order/updateOpenOrderIndex', { ...openOrdersQuery })

diff --git a/src/views/TransferOrders.vue b/src/views/TransferOrders.vue
@@ -38,7 +38,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="loadMoreTransferOrders($event)" threshold="100px" v-show="isScrollingEnabled && isTransferOrdersScrollable()" ref="infiniteScrollRef">
+          <ion-infinite-scroll @ionInfinite="loadMoreTransferOrders($event)" threshold="100px" v-show="isTransferOrdersScrollable()" ref="infiniteScrollRef">
             <ion-infinite-scroll-content loading-spinner="crescent" :loading-text="translate('Loading')"/>
           </ion-infinite-scroll>
         </div>
@@ -130,6 +130,10 @@ export default defineComponent({
       }
     },
     async loadMoreTransferOrders(event: any) {
+       // Added this check here as if added on infinite-scroll component the Loading content does not gets displayed
+       if (!(this.isScrollingEnabled && this.isTransferOrdersScrollable())) {
+        await event.target.complete();
+      }
       const transferOrdersQuery = JSON.parse(JSON.stringify(this.transferOrders.query))
       transferOrdersQuery.viewIndex = this.transferOrders.list?.length / (process.env.VUE_APP_VIEW_SIZE as any);
       await this.store.dispatch('transferorder/updateTransferOrderQuery', { ...transferOrdersQuery })