shadcn.io is not affiliated with official shadcn/ui
Comment Thread Skeleton Block for React Aria
A document review thread that loads in place: bars become four comments, two of them replies under a start rule, with a working Like toggle and a Reply button.
Installation
Overview
Show a comment thread while it loads, then swap the comments in without moving anything, with this comment thread skeleton for React with React Aria. A hairline frame with a plus mark on each corner holds the "Discussion" heading and four comments on a pricing memo from Virga, a document-review tool, two of them replies set in under a start rule. The heading and the Reply buttons are real from the first paint; each comment's avatar, name, date, two-line text and Like button are Skeleton bars that become the comment in the same place, one after another when you press Load. Like is a real toggle that counts in this tab only, and Reply says it isn't wired in this demo. On a phone the reply indent is halved. It's built from Skeleton, Skeleton Text, Avatar, Toggle, Button and Guides, with a CSS entrance only. For document reviews, pull-request discussions and any threaded comments.
FAQ
What stays local, and how do I wire it to real comments?
Nothing is fetched. The four comments are typed in THREAD, Load starts a 700 millisecond timer, and when it ends the phase becomes ready and the data swaps in; Reload goes back to the bars and in again. To wire it for real, delete the timer, the Load button and the polite line, and set data-state (loading or ready) and aria-busy on the region from your query's pending state, or use the bars as a Suspense fallback and render the real comments when they arrive. The bars are derived from the same data as the content, so keep one component for both. Like keeps your press in this tab; send it to your API in like and use the saved count.
Does the thread keep its height while it loads?
Each bar and its content sit in one grid cell, so the larger of the two sets the cell's box and the swap changes nothing around it. Each comment's text is a Skeleton Text that holds its own height, so a three-line comment is three lines tall in both phases. The chrome is real in both phases and the polite line reserves two lines, so the panel is exactly as tall before, during and after loading at every width.
How does the Like toggle work?
It is a pressed toggle with a visible count: pressing it adds one to the typed count and pressing it again takes it back. The count is not saved anywhere and Reload clears it. While loading, the toggle is a bar of its size so it can't be pressed before the comment exists.
How are replies shown?
A reply is a comment with reply: true. It is moved in by a start margin and ruled by a start border, and the margin halves on a phone. Add deeper levels by raising the margin per level, or keep one level as here for readability.
Is it accessible?
The region is marked busy while it loads and carries a screen-reader-only "Loading comments…", and the polite line announces what loaded once. The bars are hidden from assistive technology and the layer that isn't showing is invisible, so it is neither read nor focusable. The pulse stops when the data is in, and under reduced motion there is no pulse, no spinner and no stagger: the swap is instant.