shadcn.io is not affiliated with official shadcn/ui
Split Hero Skeleton Block for Solid
A two-column home page hero that loads in place: bars become a three-line heading, a sentence, two buttons and a drawn armchair corner when you press Load.
Installation
Overview
Show a split hero while its content loads, then swap the content in without moving anything, with this split hero skeleton for Solid with Ark UI. A hairline frame with a plus mark on each corner holds a band heading and the hero of Organza, a furniture-rental service, in two columns: the copy at the start and the picture at the end, which stacks under the copy on a phone. The frame and the heading are real from the first paint; the three-line heading, the three-line sentence, the two buttons (Browse rooms and How it works) and the picture are Skeleton bars that become the content in the same boxes, copy first and picture last, when you press Load. Reload goes back to the bars. The buttons say they are not wired in this demo. The picture is a drawn greyscale reading corner with an armchair, a side table, a lamp and a framed print. It's built from Skeleton, Button and Guides, with a CSS entrance only. For product and service sites whose hero is edited in a CMS.
FAQ
What stays local, and how do I wire it to a real query?
Nothing is fetched. The heading, sentence, button labels and picture are typed in HERO and CORNER, Load starts a 700 millisecond timer, and when it ends the phase becomes ready and the content 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 content when it arrives. The bars sit in the same cells as the content, so keep one component for both.
Why doesn't the hero jump when the content arrives?
Each bar and its content sit in one grid cell, so the larger of the two sets the cell's box and the swap changes nothing around it. The heading and the sentence have one bar per line, and the lines change with the width (more on a phone, fewer between the small and medium breakpoints), so the bars match the text at every width. The frame and the labels are real in both phases, and the polite line reserves two lines, so the panel is as tall before, during and after loading. A heading or a paragraph that wraps to more lines than its bars is the one thing that can still move the page, so give a text bar as many lines as the text takes at that width.
Is the picture a photo?
It is drawn: a greyscale scene made of a few SVG shapes whose inks follow the theme, named once by its figure and never a grey box with an icon. In your project, replace the Plate figure with an img that has the same size classes and an alt, and leave the bar as it is; the bar and the image share a box, so the swap still moves nothing.
Why is the picture second in the document?
The copy comes first because it is read first, on a phone and with a screen reader. From the medium breakpoint the picture sits at the end of the row, whichever way the language reads; the side cell's divider and plus marks follow the reading direction.
Is it accessible?
The region is marked busy while it loads and carries a screen-reader-only "Loading the hero…", and the polite line says 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 content is in, and under reduced motion there is no pulse, no spinner and no stagger: the swap is instant.