Skeleton

Skeleton is used as placeholder while content is loading. Provides visual feedback during data fetching.

const { default: Skeleton } = await import('/components/data-display/skeleton.js');

const { tags, $ } = Lightview;
const { div } = tags;

const cardSkeleton = div({ class: 'flex flex-col gap-4 w-52' },
    Skeleton({ class: 'h-32 w-full' }),
    Skeleton({ class: 'h-4 w-28' }),
    Skeleton({ class: 'h-4 w-full' }),
    Skeleton({ class: 'h-4 w-full' })
);

$('#demo').insert(cardSkeleton);

const { default: Skeleton } = await import('/components/data-display/skeleton.js');
const { default: Button } = await import('/components/actions/button.js');
const { default: Card } = await import('/components/data-display/card.js');

const { signal, tags, $ } = Lightview;
const { div, p, h3, img } = tags;

const loading = signal(true);

// Simulate data loading
setTimeout(() => { loading.value = false; }, 2000);

const demo = div({ class: 'w-64' },
    () => loading.value
        ? div({ class: 'flex flex-col gap-4' },
            Skeleton({ class: 'h-40 w-full rounded-lg' }),
            Skeleton({ class: 'h-6 w-3/4' }),
            Skeleton({ class: 'h-4 w-full' }),
            Skeleton({ class: 'h-10 w-24' })
        )
        : Card({},
            Card.Figure({ 
                src: 'https://picsum.photos/300/200?random=20',
                alt: 'Loaded content'
            }),
            Card.Body({},
                Card.Title({}, 'Content Loaded'),
                p({}, 'This is the actual content!'),
                Button({ color: 'primary', size: 'sm' }, 'Action')
            )
        ),
    Button({ 
        class: 'mt-4',
        size: 'sm',
        onclick: () => { loading.value = true; setTimeout(() => { loading.value = false; }, 2000); }
    }, 'Reload')
);

$('#demo').insert(demo);

Props

Card Skeleton

With Avatar