skeleton-loaders

Skeleton Loaders

Build skeleton loading states that are pixel-perfect matches of real content.

Transparent Text Technique

Use real HTML elements (<p>, <span>, <h2>, <button>) with the same font classes as the real component, plus shimmer + transparency classes. This makes skeletons inherit exact line-height, font-size, and weight, producing pixel-perfect dimensions without hardcoded h-*/w-* values.

Shimmer class constant

Define a shared class string at the top of the skeleton component:

const shimmer =
  'animate-shimmer rounded-sm bg-linear-to-r from-slate-950 via-slate-900 to-slate-950 bg-size-[200%_100%] text-transparent select-none';

Text elements

Copy the real component's element type and font classes, add shimmer. How you fill the text depends on whether the real text is static or dynamic:

• Static, translatable text (labels, headings, button text): use the same t() value the real component uses. The text is transparent, but reusing t() makes the skeleton width match the revealed text exactly.
• Dynamic runtime values ({data.name}, API content): you cannot know the real value, so use hardcoded placeholder text of similar character count to approximate its width.

import {twJoin} from 'tailwind-merge';

// Real component
<h2 className="text-lg font-bold text-white">{t('profile.heading')}</h2>   // static
<p className="truncate text-sm font-semibold text-white">{data.name}</p>   // dynamic
<p className="text-xs text-slate-400">{data.value}</p>                     // dynamic

// Skeleton
<h2 className={twJoin('text-lg font-bold', shimmer)}>{t('profile.heading')}</h2>  // same t(), exact width
<p className={twJoin('truncate text-sm font-semibold', shimmer)}>Name</p>         // approximate
<p className={twJoin('text-xs', shimmer)}>Example value</p>                        // approximate

Non-text elements (images, icons, avatars)

Keep as empty divs with the shimmer class, no text needed:

<div className={twJoin('size-14 shrink-0', shimmer)} />