From 21d8273967d3cafa1030429d1daadf01868267c4 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Thu, 12 Feb 2026 10:32:25 +0300
Subject: [PATCH] feat(VirtualList): add throttling

---
 src/shared/ui/VirtualList/VirtualList.svelte | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/shared/ui/VirtualList/VirtualList.svelte b/src/shared/ui/VirtualList/VirtualList.svelte
index ff833b4..71d066a 100644
--- a/src/shared/ui/VirtualList/VirtualList.svelte
+++ b/src/shared/ui/VirtualList/VirtualList.svelte
@@ -10,6 +10,7 @@
 -->
 <script lang="ts" generics="T">
 import { createVirtualizer } from '$shared/lib';
+import { throttle } from '$shared/lib/utils';
 import { ScrollArea } from '$shared/shadcn/ui/scroll-area';
 import { cn } from '$shared/shadcn/utils/shadcn-utils';
 import type { Snippet } from 'svelte';
@@ -154,10 +155,20 @@ $effect(() => {
     }
 });
 
+const throttledVisibleChange = throttle((visibleItems: T[]) => {
+    onVisibleItemsChange?.(visibleItems);
+}, 150); // 150ms debounce
+
+const throttledNearBottom = throttle((lastVisibleIndex: number) => {
+    onNearBottom?.(lastVisibleIndex);
+}, 200); // 200ms debounce
+
 $effect(() => {
     const visibleItems = virtualizer.items.map(item => items[item.index]);
-    onVisibleItemsChange?.(visibleItems);
+    throttledVisibleChange(visibleItems);
+});
 
+$effect(() => {
     // Trigger onNearBottom when user scrolls near the end of loaded items (within 5 items)
     if (virtualizer.items.length > 0 && onNearBottom) {
         const lastVisibleItem = virtualizer.items[virtualizer.items.length - 1];
@@ -165,7 +176,7 @@ $effect(() => {
         const itemsRemaining = items.length - lastVisibleItem.index;
 
         if (itemsRemaining <= 5) {
-            onNearBottom(lastVisibleItem.index);
+            throttledNearBottom(lastVisibleItem.index);
         }
     }
 });
@@ -180,6 +191,7 @@ $effect(() => {
                     data-index={item.index}
                     class="absolute top-0 left-0 w-full will-change-transform"
                     style:transform="translateY({item.start}px)"
+                    data-lenis-prevent
                 >
                     {#if item.index < items.length}
                         {@render children({
@@ -212,7 +224,6 @@ $effect(() => {
                     data-index={item.index}
                     class="absolute top-0 left-0 w-full will-change-transform"
                     style:transform="translateY({item.start}px)"
-                    animate:flip={{ delay: 0, duration: 300, easing: quintOut }}
                 >
                     {#if item.index < items.length}
                         {@render children({