src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte

@@ -8,7 +8,10 @@ import {
     Skeleton,
     VirtualList,
 } from '$shared/ui';
-import type { ComponentProps } from 'svelte';
+import type {
+    ComponentProps,
+    Snippet,
+} from 'svelte';
 import { fade } from 'svelte/transition';
 import { getFontUrl } from '../../lib';
 import {
@@ -28,19 +31,21 @@ interface Props extends
      * Callback for when visible items change
      */
     onVisibleItemsChange?: (items: UnifiedFont[]) => void;
-    /**
-     * Weight of the font
-     */
     /**
      * Weight of the font
      */
     weight: number;
+    /**
+     * Skeleton snippet
+     */
+    skeleton?: Snippet;
 }
 
 let {
     children,
     onVisibleItemsChange,
     weight,
+    skeleton,
     ...rest
 }: Props = $props();
 
@@ -100,32 +105,25 @@ function handleNearBottom(_lastVisibleIndex: number) {
 }
 </script>
 
-{#key isLoading}
-    <div class="relative w-full h-full" transition:fade={{ duration: 300 }}>
-        {#if isLoading}
-            <div class="flex flex-col gap-3 sm:gap-4 p-3 sm:p-4">
-                {#each Array(5) as _, i}
-                    <div class="flex flex-col gap-1.5 sm:gap-2 p-3 sm:p-4 border rounded-lg sm:rounded-xl border-border-subtle bg-background-40">
-                        <div class="flex items-center justify-between mb-3 sm:mb-4">
-                            <Skeleton class="h-6 sm:h-8 w-1/3" />
-                            <Skeleton class="h-6 sm:h-8 w-6 sm:w-8 rounded-full" />
-                        </div>
-                        <Skeleton class="h-24 sm:h-32 w-full" />
-                    </div>
-                {/each}
-            </div>
-        {:else}
-            <VirtualList
-                items={unifiedFontStore.fonts}
-                total={unifiedFontStore.pagination.total}
-                onVisibleItemsChange={handleInternalVisibleChange}
-                onNearBottom={handleNearBottom}
-                {...rest}
-            >
-                {#snippet children(scope)}
-                    {@render children(scope)}
-                {/snippet}
-            </VirtualList>
-        {/if}
-    </div>
-{/key}
+<div class="relative w-full h-full">
+    {#if skeleton && isLoading && unifiedFontStore.fonts.length === 0}
+        <!-- Show skeleton only on initial load when no fonts are loaded yet -->
+        <div transition:fade={{ duration: 300 }}>
+            {@render skeleton()}
+        </div>
+    {:else}
+        <!-- VirtualList persists during pagination - no destruction/recreation -->
+        <VirtualList
+            items={unifiedFontStore.fonts}
+            total={unifiedFontStore.pagination.total}
+            isLoading={isLoading}
+            onVisibleItemsChange={handleInternalVisibleChange}
+            onNearBottom={handleNearBottom}
+            {...rest}
+        >
+            {#snippet children(scope)}
+                {@render children(scope)}
+            {/snippet}
+        </VirtualList>
+    {/if}
+</div>