shadcn.io is not affiliated with official shadcn/ui
Email Detail Skeleton Block for React
A shared-inbox message that loads in place: bars become the sender, address, date, subject and four paragraphs that arrive word by word, over Reply, Reply all and Forward.
Installation
Overview
Show an open email while it loads, then swap the message in without moving anything, with this email detail skeleton for React with Base UI. A hairline frame with a plus mark on each corner holds the reading pane of a thread in Isobar, a shared team inbox: the sender band, the subject, the message and a foot of three buttons. Reply, Reply all and Forward are real from the first paint; the sender's avatar, name, address and date, the subject and the four paragraphs are Skeleton bars that become the message in the same place, the paragraphs coming in a word at a time. The three buttons say they aren't wired in this demo. It's built from Skeleton, Skeleton Text, Avatar, Button and Guides, with a CSS entrance only. For mail readers, support tickets and any long message that waits for a query.
FAQ
What stays local, and how do I wire it to a real message?
Nothing is fetched. The sender and four paragraphs are typed in MESSAGE and BODY, 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 paragraphs when they arrive. The bars are derived from the same data as the content, so keep one component for both.
Does the pane 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 paragraph is a Skeleton Text with its own bars and its text in one cell, so it is as tall as the taller of the two; give lines the usual length of your text. 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 do the paragraphs come in?
Each word fades in a few milliseconds after the one before it, driven by the catalog's Skeleton Text. Under reduced motion the bars hold still and the text simply appears.
What do the foot buttons do?
Nothing yet, and they say so: "Reply isn't wired in this demo." Wire them to open your composer with the thread, and keep them aria-disabled while the message loads.
Is it accessible?
The region is marked busy while it loads and carries a screen-reader-only "Loading message…", 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. The sender's address is isolated so it keeps its order in right-to-left languages.