shadcn.io is not affiliated with official shadcn/ui
Chat Connection Status Block for React Aria
A team messenger thread whose top bar shows Connected, Slow or Reconnecting as a shape and a word, queues messages you send while reconnecting with Waiting to send, and flushes them in order when the line returns.
Installation
Overview
Show a chat that copes with a bad connection with this connection status chat for React with React Aria. A hairline frame with a plus mark on each corner holds a window of fixed height for Linkmere, a team messenger: the top bar names Berit Halvorsen and, at the end, the connection as a shape and a word, a filled dot and "Connected", a half dot and "Slow", or a ring with a spinner and "Reconnecting". A small Simulate connection choice under the log changes it. On a slow line a message you send sits in "Sending" with a clock for a moment; while reconnecting it appears with a clock and "Waiting to send" and the status line counts the messages waiting. When the line returns, the outbox flushes in order, each message turning "Sent" one after the other, the status says "Sent 2 messages that waited" and a reply follows behind a Typing Indicator Text. The log is Message and Bubble rows, the Shine Button is the only colored control, and Guides rule the frame. It's for a messenger, a field-service app or any thread used on a moving phone.
FAQ
What stays in the page, and how do I make it real?
Everything. The connection is the demo's own Simulate choice, the delays are typed (about a third of a second per message when connected, a second and a bit when slow) and the replies come from a short script; nothing is sent. To wire it for real, drive conn from the browser's online events or your socket's state, keep unsent messages in the waiting phase in local storage or a queue, and send them in order when it opens.
How does the outbox keep order?
One message at a time leaves the outbox: the first with the phase "waiting" or "sending" moves a step, then the next, so messages are sent in the order you wrote them even when the line returns with several waiting. Switching to Reconnecting while one is sending puts it back in the outbox.
How are the three connection states told apart without color?
By shape and word: a filled dot with "Connected", a half-filled dot with "Slow", and a ring with a turning arc and "Reconnecting". Each message's state is a glyph and a word too: a clock with "Waiting to send" or "Sending", a tick with "Sent".
What happens under reduced motion?
The turning arc stops and the word "Reconnecting" carries the state on its own. The waiting messages still flush in order after a short pause, since that is information rather than decoration.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log. The Simulate choice is a group of radio buttons that works with the arrow keys, and every change is spoken once through the polite status line ("Reconnecting. New messages will wait in the outbox."). The top bar states the count of waiting messages to a screen reader.