Skeleton Loader Component V2 Examples

Example 1: Basic Skeleton Shapes

Text, title, circle, rectangle, and button skeleton shapes with default shimmer animation.

const config = {
    version: 2,
    layoutId: "basic-skeletons",
    breakpoints: { xs: 1, sm: 2, md: 3 },
    gap: "2rem",
    items: [
        {
            content: {
                type: "skeleton",
                skeletonType: "title"
            }
        },
        {
            content: {
                type: "skeleton",
                skeletonType: "circle",
                variant: "lg"
            }
        },
        {
            content: {
                type: "skeleton",
                skeletonType: "rectangle",
                variant: "sm"
            }
        }
    ]
};

RSL.JSONLayout.renderLayout('#demo-basic', config);

Example 2: Animation Variants

Different animation types: shimmer (default), pulse, wave, and static.

const config = {
    version: 2,
    layoutId: "animation-skeletons",
    breakpoints: { xs: 1, sm: 2, md: 4 },
    gap: "1.5rem",
    items: [
        {
            content: {
                type: "skeleton",
                skeletonType: "paragraph",
                lines: 3
                // Default shimmer animation
            }
        },
        {
            content: {
                type: "skeleton",
                skeletonType: "paragraph",
                lines: 3,
                animation: "pulse"
            }
        },
        {
            content: {
                type: "skeleton",
                skeletonType: "paragraph",
                lines: 3,
                animation: "wave"
            }
        },
        {
            content: {
                type: "skeleton",
                skeletonType: "paragraph",
                lines: 3,
                animation: "static"
            }
        }
    ]
};

RSL.JSONLayout.renderLayout('#demo-animations', config);

Example 3: Card Skeleton

Pre-built card skeleton pattern with avatar, title, and text lines for loading content cards.

const config = {
    version: 2,
    layoutId: "card-skeletons",
    breakpoints: { xs: 1, md: 2, lg: 3 },
    gap: "2rem",
    items: [
        {
            content: {
                type: "skeleton",
                skeletonType: "card",
                avatar: true,
                lines: 3,
                animation: "shimmer"
            }
        },
        {
            content: {
                type: "skeleton",
                skeletonType: "card",
                avatar: true,
                lines: 4,
                animation: "pulse"
            }
        },
        {
            content: {
                type: "skeleton",
                skeletonType: "card",
                avatar: false,  // Card without avatar
                lines: 5
            }
        }
    ]
};

RSL.JSONLayout.renderLayout('#demo-cards', config);

Example 4: List Item Skeletons

List item skeleton pattern with avatar and two-line text, perfect for loading lists and feeds.

const config = {
    version: 2,
    layoutId: "list-skeletons",
    breakpoints: { xs: 1 },
    items: [
        {
            content: {
                type: "skeleton",
                skeletonType: "listItem",
                avatar: true
            }
        },
        {
            content: {
                type: "skeleton",
                skeletonType: "listItem",
                avatar: true
            }
        },
        {
            content: {
                type: "skeleton",
                skeletonType: "listItem",
                avatar: true
            }
        },
        {
            content: {
                type: "skeleton",
                skeletonType: "listItem",
                avatar: false  // Without avatar
            }
        }
    ]
};

RSL.JSONLayout.renderLayout('#demo-list', config);