feat(list pages): replace load more with infinite scroll (#833)

openfoodfacts · Sep 20, 2024 · 8f7a8e9 · 8f7a8e9
1 parent 0ccfa4b
commit 8f7a8e9
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 16 deletions.
diff --git a/src/views/LocationList.vue b/src/views/LocationList.vue
@@ -1,7 +1,6 @@
 <template>
   <h1 class="text-h5 mb-1">
     {{ $t('LocationList.Title') }}
-    <v-progress-circular v-if="loading" indeterminate :size="30" />
   </h1>
 
   <v-row v-if="!loading">
@@ -19,11 +18,9 @@
     </v-col>
   </v-row>
 
-  <v-row v-if="locationList.length < locationTotal" class="mb-2">
+  <v-row v-if="loading">
     <v-col align="center">
-      <v-btn size="small" :loading="loading" @click="getLocations">
-        {{ $t('Common.LoadMore') }}
-      </v-btn>
+      <v-progress-circular indeterminate :size="30" />
     </v-col>
   </v-row>
 </template>
@@ -32,6 +29,7 @@
 import { defineAsyncComponent } from 'vue'
 import constants from '../constants'
 import api from '../services/api'
+import utils from '../utils.js'
 
 export default {
   components: {
@@ -68,8 +66,19 @@ export default {
   mounted() {
     this.currentFilter = this.$route.query[constants.FILTER_PARAM] || this.currentFilter
     this.initLocationList()
+    // load more
+    this.handleDebouncedScroll = utils.debounce(this.handleScroll, 100)
+    window.addEventListener('scroll', this.handleDebouncedScroll)
+  },
+  unmounted() {
+    window.removeEventListener('scroll', this.handleDebouncedScroll)
   },
   methods: {
+    handleScroll(event) {  // eslint-disable-line no-unused-vars
+      if (utils.getDocumentScrollPercentage() > 90) {
+        this.getLocations()
+      }
+    },
     initLocationList() {
       this.locationList = []
       this.locationPage = 0

diff --git a/src/views/PriceList.vue b/src/views/PriceList.vue
@@ -63,9 +63,11 @@ export default {
     }
   },
   mounted() {
+    this.getPrices()
+    // load more
     this.handleDebouncedScroll = utils.debounce(this.handleScroll, 100)
     window.addEventListener('scroll', this.handleDebouncedScroll)
-    this.getPrices()
+    // success messages
     if (this.$route.query.signinSuccess === 'true') {
       this.signinSuccessMessage = true
     }

diff --git a/src/views/ProductList.vue b/src/views/ProductList.vue
@@ -1,7 +1,6 @@
 <template>
   <h1 class="text-h5 mb-1">
     {{ $t('ProductList.Title') }}
-    <v-progress-circular v-if="loading" indeterminate :size="30" />
   </h1>
 
   <v-row v-if="!loading">
@@ -20,11 +19,9 @@
     </v-col>
   </v-row>
 
-  <v-row v-if="productList.length < productTotal" class="mb-2">
+  <v-row v-if="loading">
     <v-col align="center">
-      <v-btn size="small" :loading="loading" @click="getProducts">
-        {{ $t('Common.LoadMore') }}
-      </v-btn>
+      <v-progress-circular indeterminate :size="30" />
     </v-col>
   </v-row>
 </template>
@@ -33,6 +30,7 @@
 import { defineAsyncComponent } from 'vue'
 import constants from '../constants'
 import api from '../services/api'
+import utils from '../utils.js'
 
 export default {
   components: {
@@ -77,8 +75,19 @@ export default {
     this.currentSource = this.$route.query[constants.SOURCE_PARAM] || this.currentSource
     this.currentOrder = this.$route.query[constants.ORDER_PARAM] || this.currentOrder
     this.initProductList()
+    // load more
+    this.handleDebouncedScroll = utils.debounce(this.handleScroll, 100)
+    window.addEventListener('scroll', this.handleDebouncedScroll)
+  },
+  unmounted() {
+    window.removeEventListener('scroll', this.handleDebouncedScroll)
   },
   methods: {
+    handleScroll(event) {  // eslint-disable-line no-unused-vars
+      if (utils.getDocumentScrollPercentage() > 90) {
+        this.getProducts()
+      }
+    },
     initProductList() {
       this.productList = []
       this.productTotal = null

diff --git a/src/views/UserList.vue b/src/views/UserList.vue
@@ -1,7 +1,6 @@
 <template>
   <h1 class="text-h5 mb-1">
     {{ $t('UserList.Title') }}
-    <v-progress-circular v-if="loading" indeterminate :size="30" />
   </h1>
 
   <v-row v-if="!loading">
@@ -19,11 +18,9 @@
     </v-col>
   </v-row>
 
-  <v-row v-if="userList.length < userTotal" class="mb-2">
+  <v-row v-if="loading">
     <v-col align="center">
-      <v-btn size="small" :loading="loading" @click="getUsers">
-        {{ $t('Common.LoadMore') }}
-      </v-btn>
+      <v-progress-circular indeterminate :size="30" />
     </v-col>
   </v-row>
 </template>
@@ -32,6 +29,7 @@
 import { defineAsyncComponent } from 'vue'
 import constants from '../constants'
 import api from '../services/api'
+import utils from '../utils.js'
 
 export default {
   components: {
@@ -68,8 +66,19 @@ export default {
   mounted() {
     this.currentFilter = this.$route.query[constants.FILTER_PARAM] || this.currentFilter
     this.initUserList()
+    // load more
+    this.handleDebouncedScroll = utils.debounce(this.handleScroll, 100)
+    window.addEventListener('scroll', this.handleDebouncedScroll)
+  },
+  unmounted() {
+    window.removeEventListener('scroll', this.handleDebouncedScroll)
   },
   methods: {
+    handleScroll(event) {  // eslint-disable-line no-unused-vars
+      if (utils.getDocumentScrollPercentage() > 90) {
+        this.getUsers()
+      }
+    },
     initUserList() {
       this.userList = []
       this.userPage = 0