feat(SampleList): add throttling to the checkPosition function
This commit is contained in:
@@ -15,6 +15,7 @@ import {
|
|||||||
TypographyMenu,
|
TypographyMenu,
|
||||||
controlManager,
|
controlManager,
|
||||||
} from '$features/SetupFont';
|
} from '$features/SetupFont';
|
||||||
|
import { throttle } from '$shared/lib/utils';
|
||||||
|
|
||||||
let text = $state('The quick brown fox jumps over the lazy dog...');
|
let text = $state('The quick brown fox jumps over the lazy dog...');
|
||||||
let wrapper = $state<HTMLDivElement | null>(null);
|
let wrapper = $state<HTMLDivElement | null>(null);
|
||||||
@@ -23,7 +24,9 @@ let innerHeight = $state(0);
|
|||||||
// Is the component above the middle of the viewport?
|
// Is the component above the middle of the viewport?
|
||||||
let isAboveMiddle = $state(false);
|
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
|
* Load more fonts by moving to the next page
|
||||||
@@ -62,14 +65,14 @@ const displayRange = $derived.by(() => {
|
|||||||
return `Showing ${loadedCount} of ${total} fonts`;
|
return `Showing ${loadedCount} of ${total} fonts`;
|
||||||
});
|
});
|
||||||
|
|
||||||
function checkPosition() {
|
const checkPosition = throttle(() => {
|
||||||
if (!wrapper) return;
|
if (!wrapper) return;
|
||||||
|
|
||||||
const rect = wrapper.getBoundingClientRect();
|
const rect = wrapper.getBoundingClientRect();
|
||||||
const viewportMiddle = innerHeight / 2;
|
const viewportMiddle = innerHeight / 2;
|
||||||
|
|
||||||
isAboveMiddle = rect.top < viewportMiddle;
|
isAboveMiddle = rect.top < viewportMiddle;
|
||||||
}
|
}, 100);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:window
|
<svelte:window
|
||||||
@@ -95,7 +98,12 @@ function checkPosition() {
|
|||||||
proximity,
|
proximity,
|
||||||
index,
|
index,
|
||||||
})}
|
})}
|
||||||
<FontListItem {font} {isFullyVisible} {isPartiallyVisible} {proximity}>
|
<FontListItem
|
||||||
|
{font}
|
||||||
|
{isFullyVisible}
|
||||||
|
{isPartiallyVisible}
|
||||||
|
{proximity}
|
||||||
|
>
|
||||||
<FontSampler {font} bind:text {index} />
|
<FontSampler {font} bind:text {index} />
|
||||||
</FontListItem>
|
</FontListItem>
|
||||||
{/snippet}
|
{/snippet}
|
||||||
|
|||||||
Reference in New Issue
Block a user