Initial commit

src/views/Playground.vue

@@ -0,0 +1,41 @@
+<template>
+    <div class="card flex justify-center">
+        <VirtualScroller :items="lazyItems" :itemSize="50" showLoader :delay="250" :loading="lazyLoading" lazy @lazy-load="onLazyLoad" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
+            <template v-slot:item="{ item, options }">
+                <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
+            </template>
+        </VirtualScroller>
+    </div>
+</template>
+
+<script setup lang="ts">
+
+import { ref } from 'vue';
+import type {VirtualScrollerLazyEvent} from "primevue";
+
+const lazyItems = ref(Array.from({ length: 10000 }));
+const lazyLoading = ref(false);
+const loadLazyTimeout = ref();
+const onLazyLoad = (event: VirtualScrollerLazyEvent) => {
+    lazyLoading.value = true;
+
+    if (loadLazyTimeout.value) {
+        clearTimeout(loadLazyTimeout.value);
+    }
+
+    //imitate delay of a backend call
+    loadLazyTimeout.value = setTimeout(() => {
+        const { first, last } = event;
+        const _lazyItems = [...lazyItems.value];
+
+        for (let i = first; i < last; i++) {
+            _lazyItems[i] = `Item #${i}`;
+        }
+
+        lazyItems.value = _lazyItems;
+        lazyLoading.value = false;
+
+    }, Math.random() * 1000 + 250);
+};
+
+</script>