shadcn.io is not affiliated with official shadcn/ui
Inline Form Skeleton Block for React
A saved fare search in one row of three fields and a Search button, with three result lines, that loads in place and reloads when you press Search.
Installation
Overview
Show a one-row search form and its results while they load, with this inline form skeleton for React with Base UI. A hairline frame with a plus mark on each corner holds one row of three labelled fields (Keyword, Where, Max price) and a Search button, then three ruled result lines, from Betony, a fare-alert tool. The labels and the button are real from the first paint; the three values and the three results are Skeleton bars that become Input controls and text in the same box when you press Load. Search is the one primary and a reload source: submitting the saved search runs it again, which is exactly what a skeleton is for. The rules are drawn by Guides, the extra control is an outline Button, and a polite line says what loaded. On a phone the fields stack and Search fills the width. For saved searches, filters and any short form whose results wait for a query.
FAQ
What stays local, and how do I wire it to a real query?
Nothing is fetched or saved. The alert and its three result lines are typed in ALERT and RESULTS, 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 Search reload the results?
Submitting a search form asks for new results, so the form's own submit sets the phase back to loading and the results come in again after the wait. In your app that is the query refetching with the field values; the fields keep what you typed, because they stay mounted and only the bar layer changes.
Does the panel 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 alert…", 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 button is aria-disabled while it loads, so a second press does nothing.