From b9eccbf627e2cc206117b9e1609330219cc0543f Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Fri, 6 Feb 2026 11:53:59 +0300
Subject: [PATCH] feat(Skeleton): create skeleton component and integrate it
 into FontVirtualList

---
 .../ui/FontVirtualList/FontVirtualList.svelte | 77 +++++++++++++++----
 .../ui/Skeleton/Skeleton.stories.svelte       | 41 ++++++++++
 src/shared/ui/Skeleton/Skeleton.svelte        | 27 +++++++
 3 files changed, 132 insertions(+), 13 deletions(-)
 create mode 100644 src/shared/ui/Skeleton/Skeleton.stories.svelte
 create mode 100644 src/shared/ui/Skeleton/Skeleton.svelte

diff --git a/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte b/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte
index ec899d9..984b89a 100644
--- a/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte
+++ b/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte
@@ -4,8 +4,12 @@
     - Handles font registration with the manager
 -->
 <script lang="ts" generics="T extends UnifiedFont">
-import { VirtualList } from '$shared/ui';
+import {
+    Skeleton,
+    VirtualList,
+} from '$shared/ui';
 import type { ComponentProps } from 'svelte';
+import { fade } from 'svelte/transition';
 import { getFontUrl } from '../../lib';
 import type { FontConfigRequest } from '../../model';
 import {
@@ -13,13 +17,42 @@ import {
     appliedFontsManager,
 } from '../../model';
 
-interface Props extends Omit<ComponentProps<typeof VirtualList<T>>, 'onVisibleItemsChange'> {
+interface Props extends
+    Omit<
+        ComponentProps<typeof VirtualList<T>>,
+        'onVisibleItemsChange'
+    >
+{
+    /**
+     * Callback for when visible items change
+     */
     onVisibleItemsChange?: (items: T[]) => void;
+    /**
+     * Callback for when near bottom is reached
+     */
     onNearBottom?: (lastVisibleIndex: number) => void;
+    /**
+     * Weight of the font
+     */
+    /**
+     * Weight of the font
+     */
     weight: number;
+    /**
+     * Whether the list is in a loading state
+     */
+    isLoading?: boolean;
 }
 
-let { items, children, onVisibleItemsChange, onNearBottom, weight, ...rest }: Props = $props();
+let {
+    items,
+    children,
+    onVisibleItemsChange,
+    onNearBottom,
+    weight,
+    isLoading = false,
+    ...rest
+}: Props = $props();
 
 function handleInternalVisibleChange(visibleItems: T[]) {
     const configs: FontConfigRequest[] = [];
@@ -50,13 +83,31 @@ function handleNearBottom(lastVisibleIndex: number) {
 }
 </script>
 
-<VirtualList
-    {items}
-    {...rest}
-    onVisibleItemsChange={handleInternalVisibleChange}
-    onNearBottom={handleNearBottom}
->
-    {#snippet children(scope)}
-        {@render children(scope)}
-    {/snippet}
-</VirtualList>
+{#key isLoading}
+    <div class="relative w-full h-full" transition:fade={{ duration: 300 }}>
+        {#if isLoading}
+            <div class="flex flex-col gap-4 p-4">
+                {#each Array(5) as _, i}
+                    <div class="flex flex-col gap-2 p-4 border rounded-xl border-gray-200/50 bg-white/40">
+                        <div class="flex items-center justify-between mb-4">
+                            <Skeleton class="h-8 w-1/3" />
+                            <Skeleton class="h-8 w-8 rounded-full" />
+                        </div>
+                        <Skeleton class="h-32 w-full" />
+                    </div>
+                {/each}
+            </div>
+        {:else}
+            <VirtualList
+                {items}
+                {...rest}
+                onVisibleItemsChange={handleInternalVisibleChange}
+                onNearBottom={handleNearBottom}
+            >
+                {#snippet children(scope)}
+                    {@render children(scope)}
+                {/snippet}
+            </VirtualList>
+        {/if}
+    </div>
+{/key}
diff --git a/src/shared/ui/Skeleton/Skeleton.stories.svelte b/src/shared/ui/Skeleton/Skeleton.stories.svelte
new file mode 100644
index 0000000..426efb8
--- /dev/null
+++ b/src/shared/ui/Skeleton/Skeleton.stories.svelte
@@ -0,0 +1,41 @@
+<script module>
+import { defineMeta } from '@storybook/addon-svelte-csf';
+import Skeleton from './Skeleton.svelte';
+
+const { Story } = defineMeta({
+    title: 'Shared/Skeleton',
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    'Skeleton component for loading states. Displays a shimmer animation when `animate` prop is true.',
+            },
+            story: { inline: false }, // Render stories in iframe for state isolation
+        },
+    },
+    argTypes: {
+        animate: {
+            control: 'boolean',
+            description: 'Whether to show the shimmer animation',
+        },
+    },
+});
+</script>
+
+<Story
+    name="Default"
+    args={{
+        animate: true,
+    }}
+>
+    <div class="flex flex-col gap-4 p-4 w-full">
+        <div class="flex flex-col gap-2 p-4 border rounded-xl border-gray-200/50 bg-white/40">
+            <div class="flex items-center justify-between mb-4">
+                <Skeleton class="h-8 w-1/3" />
+                <Skeleton class="h-8 w-8 rounded-full" />
+            </div>
+            <Skeleton class="h-32 w-full" />
+        </div>
+    </div>
+</Story>
diff --git a/src/shared/ui/Skeleton/Skeleton.svelte b/src/shared/ui/Skeleton/Skeleton.svelte
new file mode 100644
index 0000000..0e28399
--- /dev/null
+++ b/src/shared/ui/Skeleton/Skeleton.svelte
@@ -0,0 +1,27 @@
+<!--
+    Component: Skeleton
+    Generic loading placeholder with shimmer animation.
+-->
+<script lang="ts">
+import { cn } from '$shared/shadcn/utils/shadcn-utils';
+import type { HTMLAttributes } from 'svelte/elements';
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Whether to show the shimmer animation
+     */
+    animate?: boolean;
+}
+
+let { class: className, animate = true, ...rest }: Props = $props();
+</script>
+
+<div
+    class={cn(
+        'rounded-md bg-gray-100/50 backdrop-blur-sm',
+        animate && 'animate-pulse',
+        className,
+    )}
+    {...rest}
+>
+</div>