frontend-svelte/src/shared/ui/Skeleton/Skeleton.svelte

<!--
    Component: Skeleton
    Generic loading placeholder with shimmer animation.
-->
<script lang="ts">
import { cn } from '$shared/lib';
import type { HTMLAttributes } from 'svelte/elements';

interface Props extends HTMLAttributes<HTMLDivElement> {
    /**
     * Shimmer animation
     * @default true
     */
    animate?: boolean;
}

let { class: className, animate = true, ...rest }: Props = $props();
</script>

<div
    class={cn(
        'rounded-md bg-background-subtle/50 backdrop-blur-sm',
        animate && 'animate-pulse',
        className,
    )}
    {...rest}
>
</div>