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,