shadcn.io is not affiliated with official shadcn/ui
Landing Page Skeleton Block for Ark UI
A whole landing page in miniature that loads band by band: bars become a nav, a hero with a drawn tailor's form, three feature tiles, a quote and a footer line.
Installation
Overview
Show a landing page while its content loads, then swap the content in section by section, with this landing page skeleton for React with Ark UI. A hairline frame with a plus mark on each corner holds five bands from Gabardine, a tailoring app's site: a nav, a hero, three feature tiles, a customer quote and a footer line. The frame, the site's mark and name, the tile icons and the copyright are real from the first paint; the nav links and button, the hero's heading, sentence, two buttons and drawn picture, the tile titles and lines, the quote and its author, and the footer links are Skeleton bars that become the content in the same boxes, band by band from the top, when you press Load. Reload goes back to the bars. Every link and button says it is not wired in this demo. On a phone the tiles stack and the picture is shorter. It's built from Skeleton, Avatar, Button and Guides, with a CSS entrance only. For marketing pages assembled from a CMS.
FAQ
What stays local, and how do I wire it to a real query?
Nothing is fetched. The page's copy, tiles and links are typed in SITE, TILES and FOOT_LINKS, 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 page 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. Every band keeps its own padding in both phases, the tiles sit on shared hairlines at a set count, and the picture has one height for its bar and its drawing. 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.
Why do the bands arrive one after another?
Each band's delay is its place in the page times 140 milliseconds, so the page fills from the top like a document being painted. Under reduced motion the delay is zero and the whole page swaps at once.
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.
Is it accessible?
The region is marked busy while it loads and carries a screen-reader-only "Loading the page…", 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. The miniature's nav is a named navigation landmark and its headings step down from the panel's own.