shadcn.io is not affiliated with official shadcn/ui
Media Card Skeleton Block for Solid
A video card that loads in place: a drawn 16:9 thumbnail with a play disc and a duration chip, a channel avatar, a two-line title and the views, all bars that become the video when you press Load.
Installation
Overview
Show a video card while it loads, then swap the video in without moving anything, with this media card skeleton for Solid with Ark UI. A hairline frame with a plus mark on each corner holds a 16:9 thumbnail and the text under it, for a video from Fontina, a short-documentary channel. The frame is real from the first paint; the drawn thumbnail with its play disc and its duration chip, the channel's initials Avatar, the two-line title, the channel name and the views and date are Skeleton bars that become the video in the same place when you press Load. It is a card, not a player, so nothing on it presses. The thumbnail is a drawn scene, never a photograph, and the title is a Skeleton Text Effect that holds two lines in both phases. It's built from Skeleton, Avatar, Guides and Button, with a CSS entrance only. For video feeds, channel pages and any card that waits for its thumbnail.
FAQ
What stays local, and how do I wire it to a real query?
Nothing is fetched. The video's details are typed in VIDEO, 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 card when they arrive. The bars are derived from the same data as the content, so keep one component for both.
Why doesn't the card jump when the video 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 thumbnail keeps its 16:9 box, and the title is clamped to two lines so a long one is cut with an ellipsis instead of growing the card. The frame and the labels are real in both phases and the polite line reserves two lines, so the card is exactly as tall before, during and after loading at every width.
How do I use a real thumbnail?
Replace the Pic scene with an img that fills the same box (object-cover) and keep the play disc and the duration chip as its children. The box comes from the aspect-video class on Pic, so the image never changes the card's height when it decodes.
Is it accessible?
The region is marked busy while it loads and carries a screen-reader-only "Loading video…", 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 thumbnail has a text description, and the duration chip reads "Length 12:04".