shadcn.io is not affiliated with official shadcn/ui
Email Inbox Skeleton Block for Svelte
A webmail inbox that loads in place: a toolbar and six mail rows of bars become senders, subjects, clamped previews and times, with ticking and select-all that work.
Installation
Overview
Show an inbox while its mail loads, then swap the mail in without moving anything, with this email inbox skeleton for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds a toolbar band (a select-all box, the "Primary" heading and three icon buttons) over six mails from Arcus, a webmail client. The toolbar is real from the first paint; each mail's box, avatar, sender, subject, preview and time are Skeleton bars that become the mail in the same place, row by row, when you press Load. Unread senders are bold, and every row is a fixed height so a long preview clamps instead of growing. Ticking mails and the select-all box work in this tab, with a dash when only some are ticked; Archive, Delete and Mark read say they aren't wired in this demo. On a phone the boxes and buttons hide and the preview takes one line. It's built from Skeleton, Checkbox, Avatar, Button and Guides, with a CSS entrance only. For webmail, message lists and any selectable feed.
FAQ
What stays local, and how do I wire it to a real mailbox?
Nothing is fetched. The six mails are typed in MAILS, 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 mails when they arrive. The bars are derived from the same data as the content, so keep one component for both. The ticks are kept in chosen; pass them to your archive, delete and mark-read calls.
Does the inbox 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. Rows are a fixed height (h-24, h-20 on a phone) and the preview is clamped to two lines (one on a phone), so a long preview never grows a row. 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 select-all work?
The box in the toolbar ticks every mail, clears them, and shows a dash when only some are ticked. The dash is a drawn bar rather than a color, and the polite line counts the selection ("2 of 6 messages selected"). Reload clears the selection.
How are unread mails shown without color?
By weight: the sender is semibold and the subject medium, and a screen-reader-only "Unread" comes before the sender. Add a unread flag to your data and the row does the rest.
Is it accessible?
The region is marked busy while it loads and carries a screen-reader-only "Loading mail…", 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. Each box is named for its sender ("Select the message from Radclyffe Printers").