shadcn.io is not affiliated with official shadcn/ui
Form With Sections Skeleton Block for Solid
Workspace settings in three titled sections that load in place: bars become a name, a slug, a language, a digest switch and time, and two access levels, section by section.
Installation
Overview
Show a long settings form while it loads, with this form-with-sections skeleton for Solid with Ark UI. A hairline frame with a plus mark on each corner holds three ruled sections from Eyebright, a status-page service: General, Notifications and Access. Each section's title, its sentence and every field label are real from the first paint; the values are Skeleton bars that become Input and Native Select controls and a Switch in the same box, section by section, when you press Load. The foot with Save settings sticks to the bottom of the screen on a phone and sits in the frame from the medium breakpoint. The rules are drawn by Guides, the control is an outline Button, and a polite line says what loaded. On a phone each section stacks its title over its fields. For workspace settings, preferences and any form long enough to need headings.
FAQ
What stays local, and how do I wire it to a real query?
Nothing is fetched or saved. The settings are typed in SETTINGS, 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.
Why does the foot stick on a phone?
A long form pushes Save below the fold, so on a phone the foot is sticky bottom-0 inside the frame and stays in reach while you scroll through it; from the medium breakpoint it is a normal row. It never covers a field, because it stops at the end of the frame.
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 settings…", 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 switch is named by its row's title and described by its sentence.