Content Placeholder

Static, non-animated geometric shapes representing where text or images will render. Simpler than a skeleton screen, often used on lower-end devices or ultra-fast loads.

Use

When fetch time is extremely fast but layout shift must be avoided

Avoid

Long loaders > 1s (prefer animated skeletons)

Safer Alternative

No safer default listed.

Risk Level

Low risk

Live Demo

Image Placeholder

What It Is

Static, non-animated geometric shapes representing where text or images will render. Simpler than a skeleton screen, often used on lower-end devices or ultra-fast loads.

✓When to Use

When fetch time is extremely fast but layout shift must be avoided

✕When NOT to Use

Long loaders > 1s (prefer animated skeletons)

Configuration Tips

01Match the exact height and width of the final rendered content

You've Seen It In

News sitesWikipedia mobile

AI Implementation Prompts

Move from a fast scaffold to production details, then tune timing and edge states.

Create static gray box placeholders for a list.

Reference Implementation

The same implementation approach used by the live preview, kept compact enough to inspect and adapt.

"use client";

export function ContentPlaceholderDemo({ isPlaying = false }: { isPlaying?: boolean }) {
    "text-stone-400 italic">// Static gray boxes without animation (unlike Skeleton which animates)
    return (
        <div className="flex h-64 w-full items-center justify-center overflow-hidden rounded-2xl bg-white p-4 shadow-sm ring-1 ring-stone-200">
            <div className="w-full max-w-[280px] flex flex-col gap-4 p-5 rounded-2xl border border-stone-100 shadow-sm bg-white">
                <div className="flex items-center gap-3">
                    <div className="w-10 h-10 rounded-full bg-stone-100 shrink-0" />
                    <div className="flex flex-col gap-2 w-full">
                        <div className="w-3/4 h-3 rounded-full bg-stone-100" />
                        <div className="w-1/2 h-2.5 rounded-full bg-stone-50" />
                    </div>
                </div>
                <div className="w-full h-24 rounded-xl bg-stone-50 flex items-center justify-center">
                    <span className="text-stone-300 text-[10px] uppercase tracking-widest font-bold">Image Placeholder</span>
                </div>
            </div>
        </div>
    );
}

Related Effects

Skeleton Screen

A placeholder UI that mimics the shape and layout of your actual content before it loads. Shows gray blocks where text, images, and UI elements will appear, reducing perceived waiting time.