shadcn.io is not affiliated with official shadcn/ui
Basic Table Skeleton Block for Solid
A client directory table that loads in place: real column heads over six rows of bars that become names, contacts, project counts and balances when you press Load.
Installation
Overview
Show a table while its data loads, then swap the data in without moving anything, with this basic table skeleton for Solid with Ark UI. A hairline frame with a plus mark on each corner holds a band heading and a native table of six clients from Burnet, a tool for freelance studios. The heading and the four column heads (Client, Contact, Projects, Balance) are real from the first paint; each cell is a Skeleton bar that becomes the client's name, email, project count or balance in the same cell, row by row, when you press Load. Reload goes back to the bars. The frame's bands are ruled by Guides, the control is an outline Button, and a polite line says what loaded. On a phone the contact folds under the client's name. It's built from Skeleton, Button and Guides, with a CSS entrance only. For admin lists, directories and any table that waits for a query.
FAQ
What stays local, and how do I wire it to a real query?
Nothing is fetched. The six clients are typed in CLIENTS, 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 doesn't the table jump when the data arrives?
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.
How do I use the Cell helper in my own table?
Cell takes a bar class for the placeholder's size and the real content as its children. Give it the width of a typical value (w-28 for a name) and it renders the bar and the content in one grid cell. Set at to the row's index and the reveal staggers by 70 milliseconds a row. Content that isn't plain text, such as a button or a badge, takes the fit prop so its focus ring isn't clipped.
Is it accessible?
The region is marked busy while it loads and carries a screen-reader-only "Loading clients…", 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.
How do I change the columns?
Edit CLIENTS and the matching cells in ClientRow, and the heads in the table's thead. Keep a fixed width on each head except one, because the table is fixed-layout. A column that folds on a phone is hidden with max-md:hidden and repeated as a second line under the first cell.