src/shared/ui/VirtualList/VirtualList.svelte

@@ -28,6 +28,11 @@ interface Props {
      * @default 80
      */
     itemHeight?: number | ((index: number) => number);
+    /**
+     * Optional overscan value for the virtual list.
+     * @default 5
+     */
+    overscan?: number;
     /**
      * Optional CSS class string for styling the container
      * (follows shadcn convention for className prop)
@@ -48,7 +53,7 @@ interface Props {
     children: Snippet<[{ item: T; index: number }]>;
 }
 
-let { items, itemHeight = 80, class: className, children }: Props = $props();
+let { items, itemHeight = 80, overscan = 5, class: className, children }: Props = $props();
 
 let activeIndex = $state(0);
 const itemRefs = new Map<number, HTMLElement>();
@@ -56,6 +61,7 @@ const itemRefs = new Map<number, HTMLElement>();
 const virtual = createVirtualizer(() => ({
     count: items.length,
     estimateSize: typeof itemHeight === 'function' ? itemHeight : () => itemHeight,
+    overscan,
 }));
 
 function registerItem(node: HTMLElement, index: number) {