corretto problema che si aggiornava a fatica... si bloccava... era una label che veniva continuamente azzerata e riscritta...

src/views/ecommerce/productsList/productsList.ts

@@ -32,14 +32,26 @@ export default defineComponent({
     const cat = ref('')
     const loadpage = ref(false)
     const refreshpage = ref(false)
+    const show_hide = ref(false)
 
     const arrProducts = ref<any>([])
 
+    const numRecLoaded = ref(0)
+
+
     // Create a ref for the component to fix
     const componentToFixRef = ref(<any>null);
 
     const isFixed = ref(false);
 
+    const arrLoaded = computed(() => {
+      if (arrProducts.value && numRecLoaded.value)
+        return arrProducts.value.slice(0, numRecLoaded.value)
+      else {
+        return []
+      }
+    })
+
     // Register the scroll event on component mount
     const handleScroll = () => {
       const scrollTop = window.scrollY || document.documentElement.scrollTop;
@@ -69,6 +81,8 @@ export default defineComponent({
     })
 
     function calcArrProducts() {
+      console.log('calcArrProducts')
+      
       refreshpage.value = true
       let arrprod = productStore.getProducts(cosa.value)
       let catstr = cat.value;
@@ -93,6 +107,7 @@ export default defineComponent({
       }
 
       arrProducts.value = arrprod
+      loaddata()
       refreshpage.value = false
     }
 
@@ -121,6 +136,12 @@ export default defineComponent({
       window.addEventListener('scroll', handleScroll);
 
       calcArrProducts()
+
+      loaddata()
+    }
+
+    function loaddata() {
+      numRecLoaded.value = 20
     }
 
     // Remove the event listener on component destroy
@@ -137,6 +158,26 @@ export default defineComponent({
 
       return riscat
     }
+    
+
+    function onLoadScroll(index: number, done: any) {
+      if (index >= 1) {
+        if (numRecLoaded.value < arrProducts.value.length) {
+
+          const step = 10
+          let mynrec = numRecLoaded.value + step
+          
+          if (mynrec > arrProducts.value.length)
+            mynrec = arrProducts.value.length
+
+          numRecLoaded.value = mynrec
+
+          done()
+        }
+      } else {
+        done(true)
+      }
+    }
 
     onMounted(mounted)
 
@@ -157,6 +198,10 @@ export default defineComponent({
       componentToFixRef,
       isFixed,
       arrProducts,
+      show_hide,
+      onLoadScroll,
+      numRecLoaded,
+      arrLoaded,
     }
   }
 })

src/views/ecommerce/productsList/productsList.vue

@@ -116,14 +116,54 @@
             })
           }}</span>
         </div>
+        <div class="row justify-around" v-if="tools.isManager()">
+          <q-toggle
+            v-model="show_hide"
+            push
+            label="Mostra Nascosti"
+            rounded
+            glossy
+            toggle-color="primary"
+          ></q-toggle>
+        </div>
         <div class="row justify-around">
-          <div
+          <q-infinite-scroll
+            v-if="arrLoaded && arrLoaded.length > 0"
+            ref="myinfscroll"
+            :initial-index="0"
+            @load="onLoadScroll"
+            :offset="2000"
+            debounce="200"
             class="q-pa-xs row items-start"
-            v-for="(product, index) in arrProducts"
-            :key="index"
           >
-            <CProductCard :id="product._id" :complete="false" :cosa="cosa" />
-          </div>
+            <div
+              class="q-pa-xs"
+              v-for="(product, index) in arrLoaded"
+              :key="index"
+            >
+              <CProductCard
+                v-if="product.active || show_hide"
+                :id="product._id"
+                :complete="false"
+                :cosa="cosa"
+              />
+            </div>
+            <template v-slot:loading>
+              <div class="text-center">
+                <q-spinner-dots color="primary" size="40px" />
+              </div>
+            </template>
+          </q-infinite-scroll>
+          <br />
+          <q-btn
+            dense
+            size="md"
+            color="primary"
+            rounded
+            label="Vedi altri Prodotti..."
+            @click="numRecLoaded += 10"
+          >
+          </q-btn>
         </div>
       </div>
     </div>