add

Author: baseplate-admin

src/frontend/package-lock.json

@@ -88,5 +88,8 @@
 		"vite": "^8.0.0",
 		"vitest": "^4.1.0",
 		"zod": "^4.3.6"
+	},
+	"dependencies": {
+		"@tanstack/svelte-virtual": "^3.13.23"
 	}
 }

src/frontend/package.json

@@ -2,6 +2,9 @@
 	import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui';
 	import { Scrollbar } from './index';
 	import { cn, type WithoutChild } from '$lib/utils.js';
+	import { createVirtualizer, type VirtualizerOptions } from '@tanstack/svelte-virtual';
+	import type { VirtualItem } from '@tanstack/virtual-core';
+	import type { Snippet } from 'svelte';
 
 	let {
 		ref = $bindable(null),
@@ -10,14 +13,29 @@
 		orientation = 'vertical',
 		scrollbarXClasses = '',
 		scrollbarYClasses = '',
+		virtualOptions,
+		item,
 		children,
 		...restProps
 	}: WithoutChild<ScrollAreaPrimitive.RootProps> & {
 		orientation?: 'vertical' | 'horizontal' | 'both' | undefined;
 		scrollbarXClasses?: string | undefined;
 		scrollbarYClasses?: string | undefined;
 		viewportRef?: HTMLElement | null;
+		virtualOptions?:
+			| Omit<VirtualizerOptions<HTMLElement, HTMLElement>, 'getScrollElement'>
+			| undefined;
+		item?: Snippet<[VirtualItem]> | undefined;
 	} = $props();
+
+	const virtualizer = $derived(
+		virtualOptions && viewportRef
+			? createVirtualizer({ ...virtualOptions, getScrollElement: () => viewportRef })
+			: null
+	);
+
+	const virtualItems = $derived($virtualizer?.getVirtualItems() ?? []);
+	const totalSize = $derived($virtualizer?.getTotalSize() ?? 0);
 </script>
 
 <ScrollAreaPrimitive.Root
@@ -31,7 +49,19 @@
 		data-slot="scroll-area-viewport"
 		class="size-full rounded-[inherit] ring-ring/10 outline-ring/50 transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1 dark:ring-ring/20 dark:outline-ring/40"
 	>
-		{@render children?.()}
+		{#if virtualizer && item}
+			<div style="height: {totalSize}px; position: relative;">
+				{#each virtualItems as row (row.index)}
+					<div
+						style="position: absolute; top: 0; transform: translateY({row.start}px); width: 100%; height: {row.size}px;"
+					>
+						{@render item(row)}
+					</div>
+				{/each}
+			</div>
+		{:else}
+			{@render children?.()}
+		{/if}
 	</ScrollAreaPrimitive.Viewport>
 	{#if orientation === 'vertical' || orientation === 'both'}
 		<Scrollbar orientation="vertical" class={scrollbarYClasses} />