From c45429f38d894566d022ce5ceede18bef935f4d5 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 16 Feb 2026 14:15:47 +0300
Subject: [PATCH] feat(SampleList): add skeleton snippet

---
 .../SampleList/ui/SampleList/SampleList.svelte   | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/widgets/SampleList/ui/SampleList/SampleList.svelte b/src/widgets/SampleList/ui/SampleList/SampleList.svelte
index 7b36ccf..bcc29e3 100644
--- a/src/widgets/SampleList/ui/SampleList/SampleList.svelte
+++ b/src/widgets/SampleList/ui/SampleList/SampleList.svelte
@@ -16,6 +16,7 @@ import {
     controlManager,
 } from '$features/SetupFont';
 import { throttle } from '$shared/lib/utils';
+import { Skeleton } from '$shared/ui';
 
 let text = $state('The quick brown fox jumps over the lazy dog...');
 let wrapper = $state<HTMLDivElement | null>(null);
@@ -43,6 +44,20 @@ const checkPosition = throttle(() => {
 }, 100);
 </script>
 
+{#snippet skeleton()}
+    <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>
+{/snippet}
+
 <svelte:window
     bind:innerHeight
     onscroll={checkPosition}
@@ -54,6 +69,7 @@ const checkPosition = throttle(() => {
         itemHeight={220}
         useWindowScroll={true}
         weight={controlManager.weight}
+        {skeleton}
     >
         {#snippet children({
     item: font,