src/shared/ui/VirtualList/VirtualList.svelte

@@ -35,6 +35,11 @@ interface Props {
      * (follows shadcn convention for className prop)
      */
     class?: string;
+    /**
+     * An optional callback that will be called for each new set of loaded items
+     * @param items - Loaded items
+     */
+    onVisibleItemsChange?: (items: T[]) => void;
     /**
      * Snippet for rendering individual list items.
      *
@@ -50,7 +55,8 @@ interface Props {
     children: Snippet<[{ item: T; index: number }]>;
 }
 
-let { items, itemHeight = 80, overscan = 5, class: className, children }: Props = $props();
+let { items, itemHeight = 80, overscan = 5, class: className, onVisibleItemsChange, children }:
+    Props = $props();
 
 const virtualizer = createVirtualizer(() => ({
     count: items.length,
@@ -58,12 +64,17 @@ const virtualizer = createVirtualizer(() => ({
     estimateSize: typeof itemHeight === 'function' ? itemHeight : () => itemHeight,
     overscan,
 }));
+
+$effect(() => {
+    const visibleItems = virtualizer.items.map(item => items[item.index]);
+    onVisibleItemsChange?.(visibleItems);
+});
 </script>
 
 <div
     use:virtualizer.container
     class={cn(
-        'relative overflow-auto border rounded-md bg-background',
+        'relative overflow-auto rounded-md bg-background',
         'h-150 w-full',
         className,
     )}