shadcn.io is not affiliated with official shadcn/ui
Striped Table Skeleton Block for Vue
A marina rate card with zebra stripes that load in place: the stripes and column heads stay while eight berths of bars become lengths and prices column by column.
Installation
Overview
Show a rate card while its prices load, with this striped table skeleton for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a band heading ("Winter rates, from 1 November") and a native table of eight berths from Bosun, a marina's booking tool. The zebra stripes are part of the frame, so they are drawn from the first paint and the skeleton keeps them, and so are the four column heads (Berth, Length, Per night, Per week). Each cell is a Skeleton bar that becomes the berth, length or price in the same cell, and the columns come in one after another from the start edge when you press Load. On a phone the weekly price folds under the nightly one. It's built from Skeleton, Button and Guides, with a CSS entrance only. For price lists, rate cards and any table read across.
FAQ
What stays local, and how do I wire it to a real query?
Nothing is fetched. The eight berths are typed in BERTHS, 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 rows when they arrive. The bars are derived from the same array as the data, so keep one row component for both.
Why do the stripes show before the data?
They are part of the table, not of its data, so the skeleton keeps them: a solid tint on every second row, mixed from the muted and card tokens. It is a solid color rather than a transparent one so a hairline never shows through it, and it follows the theme in light and dark.
What does the column-by-column reveal do?
Each cell's delay is its column number times 120 milliseconds, so the table fills left to right (right to left in right-to-left languages, because the columns are laid out that way). Under reduced motion the delay is zero and the swap is instant.
Does the table 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. The table is fixed-layout with set column widths and fixed row heights, the heads and the frame 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 berth rates…", 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.