shadcn.io is not affiliated with official shadcn/ui
Music Player Skeleton Block for Solid
A now-playing card that loads in place: a drawn cover, the track, a scrubber with both times and prev, play, next, shuffle, like and volume controls, all bars until you press Load.
Installation
Overview
Show a music player while its track loads, then swap the player in without moving anything, with this music player skeleton for Solid with Ark UI. A hairline frame with a plus mark on each corner holds the now-playing card of Houseleek, a lo-fi radio, in four bands: the cover, the track, the scrubber and the controls. The card is real from the first paint; the drawn cover (concentric rings over a tile pattern), the title and artist, both times and every control are Skeleton bars that become the player in the same place when you press Load. Once it is in, the Slider scrubber and the volume move their own thumbs, Play, Shuffle and Like are pressed Toggles, and Previous and Next say they are not wired. There is no audio in this demo. It's built from Skeleton, Slider, Toggle, Button and Guides, with a CSS entrance only. For radio and streaming pages and any card that loads a track.
FAQ
What stays local, and how do I wire it to a real query?
Nothing is fetched. The track's details are typed in TRACK, 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 player when they arrive. The bars are derived from the same data as the content, so keep one component for both.
Does it play audio?
No. Nothing plays, and the block says so: the polite line ends with "No audio in this demo." Play is a toggle that only draws its pressed state, so you can see the control work without a sound, and the scrubber moves its own thumb. To make it real, put an audio element behind the toggle, set its currentTime from the scrubber's value and feed the scrubber from its timeupdate event.
Does the card keep its height while the track 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 cover keeps its square box and every control keeps its size, so the bars and the controls are the same boxes. 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.
Is it accessible?
The region is marked busy while it loads and carries a screen-reader-only "Loading track…", 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. Every control is named, the scrubber reads its value as time ("1:12 of 3:46") and the volume as a percentage, and both move with the arrow keys.