shadcn.io is not affiliated with official shadcn/ui
Horizontal Form Skeleton Block for Vue
A studio profile as label-and-field rows that loads in place: bars become a studio name, a booking link, a time zone, a currency and a reply-to address when you press Load.
Installation
Overview
Show a settings form with its labels beside its fields while it loads, with this horizontal form skeleton for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a band heading and five ruled rows from Lovage, a booking-page builder for pottery studios. Each row's label and helper line sit in a start column and are real from the first paint; the field in the next column is a Skeleton bar that becomes an Input or a Native Select in the same box, row by row, when you press Load. Save changes is the one primary and waits for the data; Discard is an outline Button that says there is nothing to discard. The rules are drawn by Guides, and a polite line says what loaded. On a phone each label stacks above its field. For account profiles, studio settings and any form read down a column of labels.
FAQ
What stays local, and how do I wire it to a real query?
Nothing is fetched or saved. The profile is typed in PROFILE, 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 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.
How does the label column work?
Each row is a grid with a 12rem label column from the medium breakpoint and a flexible field column. The label and the helper line stack in the first cell, so a longer helper makes the row taller in both phases alike. Below the medium breakpoint the row is one column and the label sits above its field.
Is it accessible?
The region is marked busy while it loads and carries a screen-reader-only "Loading profile…", 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.