shadcn.io is not affiliated with official shadcn/ui
Product List Skeleton Block for Svelte
A hire catalogue results list that loads in place: the Results heading stays while four rows of bars become drawn tools, descriptions, daily prices and working Add buttons.
Installation
Overview
Show a list of products while it loads, then swap the rows in, with this product list skeleton for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds a heading row and four rows of Sestet, a tool-hire catalogue. The "Results" heading is real from the first paint; the count, each row's drawn thumbnail, title, two-line description, daily price and Button are Skeleton bars that become the data in the same cell, row by row, when you press Load, the description coming in a word at a time. Add is an outline button that adds nothing and says so. On a phone the Add button folds under the price. It's built from Skeleton, Skeleton Text, Button and Guides, with a CSS entrance only. For search results, catalogues and any list of things with a price and an action.
FAQ
What stays local, and how do I wire it to a real query?
Nothing is fetched. The four tools are typed in TOOLS, 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 data when it arrives. The bars are derived from the same data as the content, so keep one component for both. Add only says that nothing was added: connect it to your own basket.
What does Add do?
Nothing, and it says so: "Nothing was added in this demo: Tile saw." Each button is named for its tool ("Add Tile saw"), so a screen reader hears which row it belongs to. It is a bar until its row arrives and is marked disabled while a reload runs.
How are the prices written?
Every amount is an integer number of cents in the typed data and is worked out from the lines in code (each row shows its own daily rate), so the amounts always add up and no rounding drifts. They are written only by one usd helper that turns cents into dollars for display, as $48.00. A price is one left-to-right span so it keeps its shape in right-to-left languages.
Does the list keep its height while it loads?
Each bar and its data sit in one grid cell, so the larger of the two sets the cell's box and the swap changes nothing around it. A row's description reserves its two lines of bars and its text in one cell, whichever is taller. The frame, the labels and the buttons are real in both phases, and the polite line reserves two lines, so the panel is exactly as tall before, during and after loading at every width.
Are the thumbnails photographs?
They are drawn: each product is a few filled shapes in an SVG on a muted ground, tinted from the foreground token so they follow light and dark mode. There are no photos. To use real pictures, replace the Art component with an <img> of the same box (keep its size classes) and keep the bar the same size.
Is it accessible?
The region is marked busy while it loads and carries a screen-reader-only "Loading results…", 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.