className- Type
string- Default
- -
- Description
- Dimensions and spacing of the pulse indicators.
Components / Display
Skeleton
எலும்புக்கூடு
Skeletons are loading placeholders that mimic the shape of the content being loaded. They reduce perceived load time and prevent layout shift.
எலும்புக்கூடுகள் ஏற்றப்படும் உள்ளடக்கத்தின் வடிவத்தை பிரதிபலிக்கும் ஏற்றுதல் இடங்காட்டிகள்.
Profile card skeleton
Component preview
Profile loading stateசுயவிவர ஏற்றுதல் நிலைTable skeleton
Component preview
Table loading stateஅட்டவணை ஏற்றுதல் நிலைStructure
Anatomy
2 parts documented for implementation and review.
1
Skeleton
எலும்புக்கூடுrequired<div>Single animated placeholder with animate-pulse opacity animation. Uses bg-muted. Shape via className — rounded-full for avatars, rounded-md for cards, h-4 w-[200px] for text lines.
2
Composition
இணைப்புCompose multiple Skeletons with same spacing as real UI to mirror layout. For a card: skeleton avatar + 2 text lines + button. Prevents layout shift on content load.
Usage guidance
- Match skeleton shape to the real content — same dimensions, same border-radius.
- Use
rounded-fullfor avatar skeletons,rounded-mdfor buttons, default for text lines. - Vary text line widths (
w-full,w-3/4,w-1/2) for natural-looking paragraphs. - Do not add Tamil/English text inside a skeleton — it is a loading state, not a placeholder.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Dimensions and spacing of the pulse indicators. |
Best practices
Match Skeleton shape exactly to the real content
Skeleton வடிவம் உண்மையான உள்ளடக்கத்தை சரியாக பிரதிபலிக்க வேண்டும்
Matching shape and size prevents jarring layout shift when the real content loads in.
உண்மையான உள்ளடக்கம் ஏற்றப்படும்போது வடிவமைப்பு மாற்றம் தவிர்க்க Skeleton வடிவம் பொருந்த வேண்டும்.
Don't show Skeleton for instant data
உடனடியாக கிடைக்கும் தரவிற்கு Skeleton காட்டாதே
Showing a skeleton for data that loads in under 300ms creates unnecessary visual noise and flash.
300ms-க்கும் குறைவில் ஏற்றப்படும் தரவிற்கு Skeleton காட்டுவது தேவையற்ற காட்சி குழப்பத்தை உருவாக்கும்.
Limit Skeleton items to the visible viewport
காண்பிக்கப்படும் பகுதிக்கு மட்டும் Skeleton உருப்படிகளை காட்டவும்
Render only the skeletons that would be visible on screen — there's no need to render 100 skeletons for a long list.
திரையில் தெரியும் பகுதிக்கு மட்டுமே Skeleton காட்டவும் — 100 Skeleton-கள் தேவையில்லை.
Don't use a static gray box as skeleton
நகர்வற்ற சாம்பல் பெட்டியை Skeleton ஆக பயன்படுத்தாதே
A static gray box without the pulse animation looks broken — always use animate-pulse to signal that content is loading.
நகர்வற்ற சாம்பல் பெட்டி உடைந்தது போல் தெரியும் — animate-pulse மூலம் ஏற்றுதல் சமிக்ஞை காட்டவும்.