From 092b58e651605b3bdb9ce2582a95345cade45f7e Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 20 Apr 2026 22:19:51 +0300
Subject: [PATCH] feat(FontVirtualList): suppress font loading during jump
 scroll catch-up

---
 .../ui/FontVirtualList/FontVirtualList.svelte | 49 ++++++++++++++++---
 1 file changed, 43 insertions(+), 6 deletions(-)

diff --git a/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte b/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte
index 48d03fb..7d4cc84 100644
--- a/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte
+++ b/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte
@@ -4,6 +4,7 @@
     - Handles font registration with the manager
 -->
 <script lang="ts">
+import { debounce } from '$shared/lib/utils';
 import {
     Skeleton,
     VirtualList,
@@ -54,6 +55,10 @@ const isLoading = $derived(
 );
 
 let visibleFonts = $state<UnifiedFont[]>([]);
+let isCatchingUp = $state(false);
+
+const showInitialSkeleton = $derived(!!skeleton && isLoading && fontStore.fonts.length === 0);
+const showCatchupSkeleton = $derived(!!skeleton && isCatchingUp);
 
 function handleInternalVisibleChange(items: UnifiedFont[]) {
     visibleFonts = items;
@@ -61,8 +66,32 @@ function handleInternalVisibleChange(items: UnifiedFont[]) {
     onVisibleItemsChange?.(items);
 }
 
+/**
+ * Handle jump scroll — batch-load all missing pages then re-enable font loading.
+ * Suppresses appliedFontsManager.touch() during catch-up to avoid loading
+ * font files for thousands of intermediate fonts.
+ */
+async function handleJump(targetIndex: number) {
+    if (isCatchingUp || !fontStore.pagination.hasMore) {
+        return;
+    }
+    isCatchingUp = true;
+    try {
+        await fontStore.fetchAllPagesTo(targetIndex);
+    } finally {
+        isCatchingUp = false;
+    }
+}
+
+const debouncedTouch = debounce((configs: FontLoadRequestConfig[]) => {
+    appliedFontsManager.touch(configs);
+}, 150);
+
 // Re-touch whenever visible set or weight changes — fixes weight-change gap
 $effect(() => {
+    if (isCatchingUp) {
+        return;
+    }
     const configs: FontLoadRequestConfig[] = visibleFonts.flatMap(item => {
         const url = getFontUrl(item, weight);
         if (!url) {
@@ -71,7 +100,7 @@ $effect(() => {
         return [{ id: item.id, name: item.name, weight, url, isVariable: item.features?.isVariable }];
     });
     if (configs.length > 0) {
-        appliedFontsManager.touch(configs);
+        debouncedTouch(configs);
     }
 });
 
@@ -113,17 +142,19 @@ function loadMore() {
 function handleNearBottom(_lastVisibleIndex: number) {
     const { hasMore } = fontStore.pagination;
 
-    // VirtualList already checks if we're near the bottom of loaded items
-    if (hasMore && !fontStore.isFetching) {
+    // VirtualList already checks if we're near the bottom of loaded items.
+    // Guard isCatchingUp: fetchAllPagesTo bypasses TQ so isFetching stays false
+    // during batch catch-up, which would otherwise let nextPage() race with it.
+    if (hasMore && !fontStore.isFetching && !isCatchingUp) {
         loadMore();
     }
 }
 </script>
 
 <div class="relative w-full h-full">
-    {#if skeleton && isLoading && fontStore.fonts.length === 0}
+    {#if showInitialSkeleton && skeleton}
         <!-- Show skeleton only on initial load when no fonts are loaded yet -->
-        <div transition:fade={{ duration: 300 }}>
+        <div class="overflow-hidden h-full" transition:fade={{ duration: 300 }}>
             {@render skeleton()}
         </div>
     {:else}
@@ -131,14 +162,20 @@ function handleNearBottom(_lastVisibleIndex: number) {
         <VirtualList
             items={fontStore.fonts}
             total={fontStore.pagination.total}
-            isLoading={isLoading}
+            isLoading={isLoading || isCatchingUp}
             onVisibleItemsChange={handleInternalVisibleChange}
             onNearBottom={handleNearBottom}
+            onJump={handleJump}
             {...rest}
         >
             {#snippet children(scope)}
                 {@render children(scope)}
             {/snippet}
         </VirtualList>
+        {#if showCatchupSkeleton && skeleton}
+            <div class="absolute inset-0 overflow-hidden" transition:fade={{ duration: 150 }}>
+                {@render skeleton()}
+            </div>
+        {/if}
     {/if}
 </div>