feat(Skeleton): create skeleton component and integrate it into FontVirtualList

This commit is contained in:
Ilia Mashkov
2026-02-06 11:53:59 +03:00
parent 63888e510c
commit b9eccbf627
3 changed files with 132 additions and 13 deletions

View File

@@ -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>