diff --git a/src/shared/ui/VirtualList/VirtualList.svelte b/src/shared/ui/VirtualList/VirtualList.svelte index 86a7bf3..6e11fae 100644 --- a/src/shared/ui/VirtualList/VirtualList.svelte +++ b/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(); @@ -56,6 +61,7 @@ const itemRefs = new Map(); const virtual = createVirtualizer(() => ({ count: items.length, estimateSize: typeof itemHeight === 'function' ? itemHeight : () => itemHeight, + overscan, })); function registerItem(node: HTMLElement, index: number) {