Details
User Chat Bubble
Default
Attachment
Compass Chat Bubble
Default
Thinking
Steps
Artifact
Best Practices
Skeleton Loaders
Use skeleton screens over generic spinners for chat loading states. Skeleton screens focus the user's attention on progress rather than waiting time, creating the perception of faster load times. They also provide structural context for what is about to appear, reducing disorientation when content arrives.
Do
Don't
Chat bubble alignment
Align sent and received messages consistently. Place outgoing messages on the right and incoming messages on the left. This creates a clear visual hierarchy and a natural conversational flow that users expect. ²
Do
Don't
Additional Reading
Skeleton Screens 101 — Nielsen Norman Group https://www.nngroup.com/articles/skeleton-screens/
Chat UI Design: How to Build Effective Chat Interfaces in 2026 — https://www.uxpin.com/studio/blog/chat-user-interface-design/