From d3297d519f28c669952c940ebec2dde057e2089c Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Thu, 12 Feb 2026 11:11:22 +0300
Subject: [PATCH] feat(SampleList): add throttling to the checkPosition
 function

---
 .../SampleList/ui/SampleList/SampleList.svelte   | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/widgets/SampleList/ui/SampleList/SampleList.svelte b/src/widgets/SampleList/ui/SampleList/SampleList.svelte
index 1d48041..7c2d4d4 100644
--- a/src/widgets/SampleList/ui/SampleList/SampleList.svelte
+++ b/src/widgets/SampleList/ui/SampleList/SampleList.svelte
@@ -15,6 +15,7 @@ import {
     TypographyMenu,
     controlManager,
 } from '$features/SetupFont';
+import { throttle } from '$shared/lib/utils';
 
 let text = $state('The quick brown fox jumps over the lazy dog...');
 let wrapper = $state<HTMLDivElement | null>(null);
@@ -23,7 +24,9 @@ let innerHeight = $state(0);
 // Is the component above the middle of the viewport?
 let isAboveMiddle = $state(false);
 
-const isLoading = $derived(unifiedFontStore.isFetching || unifiedFontStore.isLoading);
+const isLoading = $derived(
+    unifiedFontStore.isFetching || unifiedFontStore.isLoading,
+);
 
 /**
  * Load more fonts by moving to the next page
@@ -62,14 +65,14 @@ const displayRange = $derived.by(() => {
     return `Showing ${loadedCount} of ${total} fonts`;
 });
 
-function checkPosition() {
+const checkPosition = throttle(() => {
     if (!wrapper) return;
 
     const rect = wrapper.getBoundingClientRect();
     const viewportMiddle = innerHeight / 2;
 
     isAboveMiddle = rect.top < viewportMiddle;
-}
+}, 100);
 </script>
 
 <svelte:window
@@ -95,7 +98,12 @@ function checkPosition() {
     proximity,
     index,
 })}
-            <FontListItem {font} {isFullyVisible} {isPartiallyVisible} {proximity}>
+            <FontListItem
+                {font}
+                {isFullyVisible}
+                {isPartiallyVisible}
+                {proximity}
+            >
                 <FontSampler {font} bind:text {index} />
             </FontListItem>
         {/snippet}