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: ```tsx 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. ```tsx 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="t...