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(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); + {/snippet}