feat(FontVirtualList): make skeleton a snippet prop

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,24 +105,18 @@ function handleNearBottom(_lastVisibleIndex: number) {
 }
 </script>
 
-{#key isLoading}
+<div class="relative w-full h-full">
-    <div class="relative w-full h-full" transition:fade={{ duration: 300 }}>
+    {#if skeleton && isLoading && unifiedFontStore.fonts.length === 0}
-        {#if isLoading}
+        <!-- Show skeleton only on initial load when no fonts are loaded yet -->
-            <div class="flex flex-col gap-3 sm:gap-4 p-3 sm:p-4">
+        <div transition:fade={{ duration: 300 }}>
-                {#each Array(5) as _, i}
+            {@render skeleton()}
-                    <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 persists during pagination - no destruction/recreation -->
         <VirtualList
             items={unifiedFontStore.fonts}
             total={unifiedFontStore.pagination.total}
+            isLoading={isLoading}
             onVisibleItemsChange={handleInternalVisibleChange}
             onNearBottom={handleNearBottom}
             {...rest}
@@ -128,4 +127,3 @@ function handleNearBottom(_lastVisibleIndex: number) {
         </VirtualList>
     {/if}
 </div>
-{/key}