shadcn.io is not affiliated with official shadcn/ui
Article Card Skeleton Block for Vue
A travel article card that loads in place: a captioned drawn hero, a title, a byline with initials, a three-line preview and three tags come in over bars when you press Load, above a real Read article button.
Installation
Overview
Show an article card while it loads, then swap the content in without moving anything, with this article card skeleton for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a travel article from Woad, a travel magazine, in four bands: a captioned hero, the title and byline, the preview with its tags, and a foot. The card and the Read article button are real from the first paint; the drawn hero and its caption, the title, the author's Avatar, name, read time and date, the three-line preview and the three tag Badges are Skeleton bars that become the article in the same place. The hero is a figure with a figcaption, the preview is a Skeleton Text effect, and the bands are ruled by Guides. Read article is an outline Button that says it is not wired in this demo. For magazines, blogs and any article teaser with a byline.
FAQ
What stays local, and how do I wire it to a real query?
Nothing is fetched. The article is typed in ARTICLE. 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 card from your query's pending state, or use the bars as a Suspense fallback and render the real content when it arrives. Keep one component for the bars and the data so they can't drift apart.
Why doesn't the card jump when the data arrives?
The hero has a fixed 2:1 box holding the bar and the drawing in the same place, the caption, title, byline and tags each share a cell with their bar, and the preview's bars and words share one cell. The title is allowed to wrap, and its text layer is in the layout in both phases, so a longer title makes the card taller in every phase alike. The polite line reserves two lines, so the card is exactly as tall before, during and after loading.
Why is the hero a figure?
A picture with a caption is a figure with a figcaption as its last child, which is how assistive technology reads the pair. The hero has a text alternative on its wrapper and the caption is real text, not part of the picture. With a photograph, keep the figure and put an <img> with its own alt where the drawing is.
What are the tags, and what does Read article do?
The tags are outline badges in a list, each a bar until the article is in. They are plain labels here; in your app make them links to the tag's page. Read article does nothing here and says so in the polite line: "Read article isn't wired in this demo." Until the article is in, it is aria-disabled rather than disabled, so it keeps its place in the tab order.
Is it accessible?
The card is marked busy while it loads and carries a screen-reader-only "Loading article…", 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.