From a85b3cf217e6029887152e3beaec882bb520b4bd Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Fri, 16 Jan 2026 17:46:06 +0300
Subject: [PATCH] fix(VirtualList): change styles to show the correct scroll
 instantly

---
 src/shared/ui/VirtualList/VirtualList.svelte | 21 ++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/shared/ui/VirtualList/VirtualList.svelte b/src/shared/ui/VirtualList/VirtualList.svelte
index f6471f7..8b8c945 100644
--- a/src/shared/ui/VirtualList/VirtualList.svelte
+++ b/src/shared/ui/VirtualList/VirtualList.svelte
@@ -10,10 +10,7 @@
 <script lang="ts" generics="T">
 import { createVirtualizer } from '$shared/lib';
 import { cn } from '$shared/shadcn/utils/shadcn-utils';
-import {
-    type Snippet,
-    tick,
-} from 'svelte';
+import type { Snippet } from 'svelte';
 
 interface Props {
     /**
@@ -57,6 +54,7 @@ let { items, itemHeight = 80, overscan = 5, class: className, children }: Props
 
 const virtualizer = createVirtualizer(() => ({
     count: items.length,
+    data: items,
     estimateSize: typeof itemHeight === 'function' ? itemHeight : () => itemHeight,
     overscan,
 }));
@@ -66,19 +64,22 @@ const virtualizer = createVirtualizer(() => ({
     use:virtualizer.container
     class={cn(
         'relative overflow-auto border rounded-md bg-background',
-        'outline-none focus-visible:ring-2 ring-ring ring-offset-2',
-        'h-full w-full',
+        'h-150 w-full',
         className,
     )}
-    role="listbox"
-    tabindex="0"
 >
+    <div
+        style:height="{virtualizer.totalSize}px"
+        class="w-full pointer-events-none"
+    >
+    </div>
+
     {#each virtualizer.items as item (item.key)}
         <div
             use:virtualizer.measureElement
             data-index={item.index}
-            class="absolute top-0 left-0 w-full translate-y-[var(--offset)] will-change-transform"
-            style:--offset="{item.start}px"
+            class="absolute top-0 left-0 w-full"
+            style:transform="translateY({item.start}px)"
         >
             {@render children({ item: items[item.index], index: item.index })}
         </div>