shadcn.io is not affiliated with official shadcn/ui
Product Review Skeleton Block for Ark UI
A product reviews summary that loads in place: bars become a 4.4 score, stars, 128 reviews, five bars that grow to their shares and three reviews with verified marks.
Installation
Overview
Show a reviews summary while it loads, with this product review skeleton for React with Ark UI. A hairline frame with a plus mark on each corner holds a "Customer reviews" heading, a summary and three reviews of the Harnell sofa from Tracery, a furniture shop. The heading and the five "n stars" labels are real from the first paint; the score, its stars, the review count, the five distribution bars and counts, and for each review the initials, name, stars, three lines of text and the Verified purchase mark are Skeleton bars that become the data in the same cell when you press Load: the bars grow from their start, the text comes in a word at a time. The average, the count and the shares are worked out from five typed star counts. On a phone the distribution stacks under the score. It's built from Skeleton, Skeleton Text, Rating, Avatar and Guides, with a CSS entrance only. For product pages, course pages and any rating summary that waits for a query.
FAQ
What stays local, and how do I wire it to a real query?
Nothing is fetched. The five star counts and three reviews are typed in TALLY and REVIEWS, 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. The three shown are a sample of the 128: link to the rest from your own page.
Where do the score, the count and the shares come from?
From the five counts in TALLY. The count is their sum (128), the average is the weighted sum over the count to one decimal (4.4), and the shares are whole percentages by largest remainder, so the five bars add to exactly 100. Change a count and every figure follows.
How do the bars grow?
Each fill is a track with a fill whose width is zero until the region is ready and then its share, with a CSS transition. The bars are decoration; the count and its share are in the text for assistive technology. Under reduced motion the fill appears at once.
Does the panel 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. Each review's three bars and its text share a cell, so a longer review reserves its lines before it arrives. 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.
Is it accessible?
The region is marked busy while it loads and carries a screen-reader-only "Loading reviews…", 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 in words beside them; the verified mark is an icon and the words.