shadcn.io is not affiliated with official shadcn/ui
Ecommerce Grid Skeleton Block for React Aria
A ceramics product grid that loads in place: the heading and sort menu stay while bars become four drawn pieces on hairlines, and choosing a sort reloads the second order.
Installation
Overview
Show a product grid while its pieces load, with this ecommerce grid skeleton for React with React Aria. A hairline frame with a plus mark on each corner holds a heading band, four tiles two by two on shared hairlines and a count, all from Rubato, a ceramics studio shop. The "Ceramics" heading, the sort menu and its label are real from the first paint; the piece count, each drawn vessel, name, subtitle, stars and price, and "Showing 4 of 36", are Skeleton bars that become the data in the same cell, tile after tile, when you press Load. The sort is a native Native Select: choosing Price, low to high shows the bars again and then the four cheapest pieces. It's built from Skeleton, Native Select, Rating and Guides, with a CSS entrance only. For product grids, catalogues and any list that reloads when its sort changes.
FAQ
What stays local, and how do I wire it to a real query?
Nothing is fetched. The two orders of four pieces are typed in FEATURED and CHEAPEST, 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. Key your query on the sort value so a new sort fetches again.
What does the sort do?
Changing it sets the sort and starts a load, so the tiles go back to bars and the second typed order comes in: the four cheapest of the 36 pieces, cheapest first. The menu stays real while loading, and choosing again during a load simply changes which order arrives. The polite line names the order that loaded.
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 (the grid shows each piece's own price), 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 grid 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. Every tile holds a square picture, two text lines, a row of stars and a price, and both orders hold four pieces, so the grid is the same height whichever sort is showing. 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 pictures 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 ceramics…", 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 stars are decoration, hidden from assistive technology, with the rating said in words beside them.