Article Preview Skeleton for React

A size-10 rounded-full circle with an h-4 w-24 line and an h-3 w-32 line is the author. h-6 w-3/4 is the title, three h-4 bars are the excerpt, and three rounded-full pills are the tags.

The wrapper is flex w-full max-w-2xl flex-col gap-4 rounded-md border p-6. The author row is flex items-center gap-3, and the two name lines stack with gap-2.

The first two excerpt bars are h-4 w-full. The third is h-4 w-2/3, so the block reads as a paragraph that ends early. Match those widths to the real excerpt so the card does not jump.

A row with flex gap-2 pt-2 holds three Skeletons: h-6 w-16, h-6 w-20 and h-6 w-24, each with rounded-full. rounded-full replaces the radius Skeleton gets from your style.

Skeleton adds animate-pulse, bg-muted and data-slot="skeleton". Size and radius stay on each bar. Edit the skeleton file under components/ui to change the pulse for every placeholder.

Yes, when nearby text already says the article is loading. Set aria-hidden on each Skeleton so the pulse is not announced as an empty image. The bars are not a loading message on their own.