feat: infinite scroll for market

static/components/customer-market/customer-market.html

@@ -25,9 +25,17 @@
     <q-img :src="styles.ui.banner" style="width: 100%; height: 250px" cover></q-img>
   </q-banner>
 
-  <div class="row q-col-gutter-md">
+  <q-infinite-scroll @load="onLoad" :offset="250">
-    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" v-for="(item, idx) in products" :key="idx">
+    <div class="row q-col-gutter-md">
-      <product-card :product="item" @change-page="changePageM"></product-card>
+      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" v-for="(item, idx) in partialProducts" :key="idx">
+        <product-card :product="item" @change-page="changePageM"></product-card>
+      </div>
     </div>
-  </div>
+    <template v-if="lastProductIndex < products.length" v-slot:loading>
+      <div class="row justify-center q-my-md">
+        <q-spinner-dots color="primary" size="40px" />
+      </div>
+    </template>
+  </q-infinite-scroll>
+</div>
 </div>

static/components/customer-market/customer-market.js

@@ -15,7 +15,11 @@ async function customerMarket(path) {
     ],
     data: function () {
       return {
-        search: null
+        search: null,
+        partialProducts: [],
+        productsPerPage: 24,
+        startIndex: 0,
+        lastProductIndex: 0
       }
     },
     methods: {
@@ -48,8 +52,23 @@ async function customerMarket(path) {
         pool.close(relays)
         await this.$emit('update-data', [...stallEvents, ...productEvents])
         this.$q.loading.hide()
+      },
+      onLoad(_, done) {
+        setTimeout(() => {
+          if (this.startIndex >= this.products.length) {
+            done()
+            return
+          }
+          this.startIndex = this.lastProductIndex
+          this.lastProductIndex = Math.min(this.products.length, this.lastProductIndex + this.productsPerPage)
+          this.partialProducts.push(...this.products.slice(this.startIndex, this.lastProductIndex))
+          done()
+        }, 100)
       }
     },
-    created() {}
+    created() {
+      this.lastProductIndex = Math.min(this.products.length, 24)
+      this.partialProducts.push(...this.products.slice(0, this.lastProductIndex))
+    }
   })
 }