glyphdiff.com/frontend-svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(VirtualList): VirtualList now supports pagination, it loads batches when user scrolls near the end of current batch

Browse Source
This commit is contained in:
Ilia Mashkov
2026-01-31 11:48:14 +03:00
parent 3add50a190
commit b1ce734f19
3 changed files with 85 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/features/GetFonts/ui/SuggestedFonts/SuggestedFonts.svelte
View File

@@ -15,7 +15,10 @@ import { cn } from '$shared/shadcn/utils/shadcn-utils';
* Load more fonts by moving to the next page
*/
function loadMore() {
if (!unifiedFontStore.pagination.hasMore || unifiedFontStore.isFetching) {
if (
!unifiedFontStore.pagination.hasMore
|| unifiedFontStore.isFetching
) {
return;
}
unifiedFontStore.nextPage();
@@ -24,15 +27,14 @@ function loadMore() {
/**
* Handle scroll near bottom - auto-load next page
*
* Triggered when the user scrolls within 5 items of the end of the list.
* Only fetches if there are more pages available and not already fetching.
* Triggered by VirtualList when the user scrolls within 5 items of the end
* of the loaded items. Only fetches if there are more pages available.
*/
function handleNearBottom(lastVisibleIndex: number) {
const { hasMore, total } = unifiedFontStore.pagination;
const itemsRemaining = total - lastVisibleIndex;
function handleNearBottom(_lastVisibleIndex: number) {
const { hasMore } = unifiedFontStore.pagination;
// Only trigger if within 5 items of the end, more data exists, and not already fetching
if (itemsRemaining <= 5 && hasMore && !unifiedFontStore.isFetching) {
// VirtualList already checks if we're near the bottom of loaded items
if (hasMore && !unifiedFontStore.isFetching) {
loadMore();
}
}
@@ -47,13 +49,8 @@ const displayRange = $derived.by(() => {
});
</script>
{#if unifiedFontStore.pagination.total > 0 && !unifiedFontStore.isLoading}
<div class="text-sm text-muted-foreground px-2 py-2">
{displayRange}
{#if unifiedFontStore.isFetching}
<span class="ml-2 text-xs text-muted-foreground/70">(Loading...)</span>
{/if}
</div>
{#if unifiedFontStore.isFetching || unifiedFontStore.isLoading}
<span class="ml-2 text-xs text-muted-foreground/70">(Loading...)</span>
{/if}
<FontVirtualList