shadcn.io is not affiliated with official shadcn/ui
Drawer Skeleton Block for Svelte
A shop's order drawer shown open while it loads: the title and the Customer, Placed, Total and Shipping labels stay while bars and a three-line note become the order's values.
Installation
Overview
Show a record drawer while its data loads, then swap the data in without moving anything, with this drawer skeleton for Svelte with Ark UI. It belongs to Selfheal, a small shop: the Orders page has an outline Open order Button in its header, and a side sheet for order 7305 is drawn open at the end of a hairline frame with a plus mark on each corner, over a drawing of the orders list. The sheet's title, its four labels, Customer, Placed, Total and Shipping, and the note's label are real from the first paint; the four values and the three-line gift note are Skeleton bars that become the data in the same cells, row by row, when you press Load in the foot. Reload goes back to the bars. For preview the sheet is drawn open in place; Open order opens the real Sheet with the same content. For order desks, record panels and any detail that waits for a query.
FAQ
Why is the drawer already open, and what do I keep?
So you can see it without a click. On load the sheet is a copy drawn in place at the end of the frame: a native dialog element that isn't modal, so nothing is trapped, hidden or focused. Open order opens the real Sheet, modal, with its focus trap, Escape and focus return, showing the same body and the same phase, and the copy stays closed until a reload. In your app keep the Sheet and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.
Which side does the sheet open from?
From the end of the page's reading direction: the right in a left-to-right page and the left in a right-to-left one. The sheet's own sides are physical, so sideOf reads the page's direction when the sheet opens and passes the matching one. The copy shown on load uses logical positions, and on a phone it docks to the foot of the frame as a bottom sheet.
What stays local, and how do I wire it to a real query?
Nothing is fetched. The order is typed in FACTS and NOTE. 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 data when it arrives. The bars are derived from the same data as the real thing, so keep one component for both.
Does the sheet change size while it loads?
No. Each value and its bar sit in one grid cell, the rows have a fixed padding, and the three-line note is the catalog's text effect, whose bars and words share one cell, so the taller holds the height. The title, the labels and the foot are real in both phases.
Is it accessible?
The region is marked busy while it loads and carries a screen-reader-only "Loading the order…", 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 real sheet is named by its title and described by its sentence, Escape and Close return focus to Open order, and Load stays a button in the foot that is marked busy rather than disabled so focus never leaves it.