shadcn.io is not affiliated with official shadcn/ui
Settings Sidebar Skeleton Block for React Aria
A podcast-hosting settings window whose sections reload: pressing General, Members, Notifications or Billing loads that section's form of three fields while the labels and Save stay.
Installation
Overview
Show a settings area while a section loads, then swap its fields in, with this settings sidebar skeleton for React with React Aria. A hairline window with a plus mark on each corner holds a sidebar of four sections from Dado, a podcast-hosting platform (General, Members, Notifications, Billing), a top bar with the Settings heading and an outline Load Button, and the open section's form: a title, a sentence, three fields and a Save ShineButton. The sections, the field labels and Save are real from the first paint; each field's value is a Skeleton bar that becomes the typed Input or NativeSelect in the same cell, row by row. Pressing a section is the reload: it loads that section's own form, and every section has three fields of the same heights, so the window never moves. Save is disabled while loading and says it saved nothing but the demo. On a phone the sections are one scrolling row above the form. For account settings, workspace settings and any form that loads per tab.
FAQ
What stays local, and how do I wire it to a real query?
Nothing is fetched. The four sections and their twelve fields are typed in SECTIONS, 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 fields when they arrive. The bars are derived from the same data as the real content, so keep one component for both. Save only says it saved in the demo: send the form to your own endpoint.
Does the window keep its height while a section loads?
The window has a fixed height (h-[36rem], md:h-[46rem]) and only its page scrolls, never the window or the host page. Each bar and its data sit in one grid cell, so the larger of the two sets the cell's box, and the sections, the field labels and Save are real in both phases. Nothing is added or removed when the data arrives, so the window is exactly as tall and every control is where it was before, during and after loading. Every section holds exactly three fields of one height, which is what keeps this true as you switch.
How does pressing a section reload it?
Each section is a button that sets the open section and starts the wait again, so pressing another section while one is loading restarts the wait for the new one. The form is keyed on the section, so its fields come back at their saved values. In your app, the section would be a route and the wait your query for it.
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 it is neither read nor focusable. 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 sections are a navigation with the current one marked, every field has a visible label tied to it, and Save keeps its place while it is disabled, so focus never has to move.