shadcn.io is not affiliated with official shadcn/ui
Modal Dialog Skeleton Block for React Aria
A customer edit dialog shown open over the customers list while its record loads: real labels over three bars that become a name, an email and notes when you press Load.
Installation
Overview
Show a dialog while its record loads, with this modal dialog skeleton for React with React Aria. The page is Customers in Pimpernel, a small shop's order tool, drawn behind a scrim as a title, a search and a table of shapes. In front of it a Dialog is shown open in place with a title, a sentence and three labelled fields (Name, Email, Notes): the labels and the buttons are real from the first paint, and the values are Skeleton bars that become Input and Textarea controls in the same box when you press Load in the footer. Save is the one primary and stays unavailable while the record loads. Press Edit customer in the header and the real dialog opens with the same fields and the same state, with focus trapped and returned to the button when it closes. The load control is an outline Button. On a phone the in-place dialog docks to the foot of its stage. For edit dialogs, record sheets and any overlay that waits for data.
FAQ
What stays local, and how do I wire it to a real query?
Nothing is fetched or saved. The customer is typed in CUSTOMER, 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 form when the data arrives. Save is a local line: replace the submit handler with your mutation. In your app keep the Dialog and drop the in-place copy: the "in-place" state, the scrim, its dialog and the Escape effect.
Why is the dialog already open?
So the loading state is visible without a click: on load a native non-modal dialog is drawn in place over the drawn page, with nothing trapped or focused. Press Edit customer to open the real modal; the in-place copy stays closed until a reload.
Does the dialog keep its height while it loads?
Each bar and its control sit in one grid cell, so the larger of the two sets the cell's box and the swap changes nothing around it. The labels, the helper lines, the heading and the buttons are real in both phases, every bar has the height of the control it stands in for, and the polite line reserves two lines, so the panel is exactly as tall before, during and after loading at every width.
Is it accessible?
The region is marked busy while it loads and carries a screen-reader-only "Loading customer…", 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 a field is neither read nor focusable until its data is in. Every control has a real label, and Save is aria-disabled rather than removed while it waits. 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 dialog traps focus, closes on Escape and returns focus to Edit customer; the drawn page behind the in-place copy is hidden from assistive technology.