SkeletonChat
v1.0.2Updated 20 Jul 2026A placeholder for a message thread: alternating incoming and outgoing bubbles with avatars, at deterministically varied widths so the transcript looks natural. Outgoing rows flip direction and corner rounding just like real bubbles. Use it while chat history loads.
Preview
Live · 7 stories▸Why this is recommendedloadingplaceholderchatmessages+3
SkeletonChat showing skeleton placeholders while data loads — chat.
- ✓Chat history while a conversation loads
- ✓Support widget before messages arrive
- ✓AI assistant transcript on first paint
- ✓Direct message thread during initial fetch
- ✓Comment thread styled as a conversation
- Configurable message count
- Alternating incoming / outgoing alignment
- Avatar per message via SkeletonAvatar
- Varied bubble widths and occasional follow-up bubble
- Correct bubble corner rounding per side
- role="status" + aria-busy with an sr-only "Loading…" label
- i18n: labels prop overrides the sr-only "Loading…" announcement
- ✕Waiting on a single in-flight reply (use a typing indicator)
- ✕Flat lists with no bubbles (use SkeletonRow)
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
messagesHow many message rows to render. Defaults to 4.
—animationShimmer style applied to every bubble. Defaults to 'pulse'.
—intensityPlaceholder contrast against the surface.
—labelsOverride the built-in sr-only "Loading…" announcement (i18n). Merged over DEFAULT_SKELETON_CHAT_LABELS.
—