shadcn.io is not affiliated with official shadcn/ui
Two-Column Form Skeleton Block for Solid
A staff record in two columns with a bio across both, that loads in place: bars become names, a role, a team, a start date, a manager and the bio, start column first.
Installation
Overview
Show a wide form while its record loads, with this two-column form skeleton for Solid with Ark UI. A hairline frame with a plus mark on each corner holds a band heading and a two-column grid of six fields, then a bio across both columns, from Comfrey, a rota planner. The heading and the labels (First name, Last name, Role, Team, Start date, Manager, Bio) are real from the first paint; each value is a Skeleton bar that becomes an Input, a Native Select, a date input or a Textarea in the same box, the start column first, then the end column, then the bio, when you press Load. The rules are drawn by Guides, the control is an outline Button, the one primary is Save record, and a polite line says what loaded. On a phone the grid is one column in the same reading order. For employee records, contact cards and any form with more fields than a single column suits.
FAQ
What stays local, and how do I wire it to a real query?
Nothing is fetched or saved. The record is typed in RECORD, 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.
Does the order change on a phone?
No. The fields are in the page in reading order, First name, Last name, Role, Team, Start date, Manager, then the bio, and the grid only changes how many columns it lays them across. A keyboard moves through them in the same order at every width.
Does the form 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 record…", 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.