skeleton-loaderslisted

# 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`, use placeholder text of similar character count: ```tsx import {twJoin} from 'tailwind-merge'; // Real component <p className="truncate text-sm font-semibold text-white">{data.name}</p> <p className="text-xs text-slate-400">{data.value}</p> // Skeleton <p className={twJoin('truncate text-sm font-semibold', shimmer)}>Name</p> <p className={twJoin('text-xs', shimmer)}>Example value</p> ``` ### Non-text elements (images, icons, avatars) Keep as empty divs with the shimmer class — no text needed: ```tsx <div className={twJoin('size-14 shrink-0', shimmer)} /> ``` ### Interactive elements (buttons) Use the real element type with `tabIndex={-1}` to prevent focus: ```tsx <button className={twJoin('w-full py-2 t