COMPONENT: Skeleton Loader Component

[nayan458]

Task: Skeleton Loader Component

Type: Component
Milestone: M0.5 — Shared Component Library
Estimate: S

Component Type

• Design system (no API calls, pure props)

Props Interface

interface SkeletonProps {
  variant?:  'text' | 'card' | 'avatar' | 'bar' | 'custom';
  width?:    string | number;
  height?:   string | number;
  lines?:    number;          // for 'text' variant — number of lines
  className?: string;
}

Variants / States

Variant	Description	Used in
text	One or more lines of shimmer text	Report details, audit trail
card	Full card-height shimmer block	Report queue loading state
avatar	Circle shimmer	Topbar, UserPanel
bar	Thin horizontal shimmer	Score bar, progress indicators
custom	Raw width + height, you control shape	Any one-off case

Acceptance Criteria

• Shimmer animation uses CSS @keyframes — no JS interval
• Animation color derived from --bg-secondary / --bg-tertiary — adapts to all themes including dark
• text variant with lines={3} renders 3 lines, last line shorter (natural paragraph feel)
• card variant matches the exact height of a collapsed ReportCard
• Zero hardcoded hex values
• Storybook stories: all variants, text with multiple lines, card in a list

Notes

• ModerationQueue shows 3 card skeletons while useReports is loading — size must match real cards to prevent layout shift on load