feat(Skeleton): create skeleton component and integrate it into FontVirtualList
This commit is contained in:
41
src/shared/ui/Skeleton/Skeleton.stories.svelte
Normal file
41
src/shared/ui/Skeleton/Skeleton.stories.svelte
Normal 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>
|
||||
27
src/shared/ui/Skeleton/Skeleton.svelte
Normal file
27
src/shared/ui/Skeleton/Skeleton.svelte
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user