shadcn.io is not affiliated with official shadcn/ui
Map View Skeleton Block for React Aria
A hiking-trail finder's map and results that load in place: the drawn valley and its search field stay while bars become three numbered pins and three trail rows with thumbnails and stars.
Installation
Overview
Show a map with its results while they load, then swap the results in without moving anything, with this map view skeleton for React with React Aria. A hairline frame with a plus mark on each corner holds a drawn map of an invented valley, Skelwick Vale, with a floating search field, and under it three trail rows, from Agrimony, a hiking-trail finder. The map, the search field, the band heading and the caption are real from the first paint; the three numbered pins and the rows, each a drawn thumbnail, the trail's name, its length and trailhead, a read-only Rating and its distance, are Skeleton bars that become the data in the same cells when you press Load, the pins first and then the rows. The thumbnails are drawn greyscale scenes, never photos. The map is a drawing, not to scale, and the search field says it is not wired in this demo. It's built from Skeleton, Rating, Input, Button and Guides, with a CSS entrance only. For trail finders, venue maps and any map with result cards that waits for a query.
FAQ
What stays local, and how do I wire it to a real query?
Nothing is fetched. The three trails are typed in TRAILS, with their ratings, distances and pin positions. 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 data when it arrives. The bars are derived from the same data as the real thing, so keep one component for both.
Does the search field work?
It is a real field, so you can type in it and press Enter, but nothing is searched: the polite line says "Search isn't wired in this demo." In your app submit it to your query, set the phase while it is pending and render the new trails in the same rows.
Is the map real?
It is a drawing of an invented valley, not to scale, built from a few SVG paths with numbered pins placed in percent of the drawing, and the caption says so. In your app put a map library in its place and keep the pins' numbers in step with the rows. It stays left to right in a right-to-left page, because a map does not mirror.
Does the panel change size while it loads?
No. Each bar and its data sit in one grid cell, the thumbnail is a fixed 5 rem square with a bar of the same size, and the rows have a fixed padding, so the panel is exactly as tall before, during and after loading. The map has a fixed height that is a little shorter on a phone.
Is it accessible?
The region is marked busy while it loads and carries a screen-reader-only "Loading trails…", 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 pins and the stars are decorative and hidden from assistive technology, since each row says the trail's name, length, rating in words and distance, and the thumbnail has no alternative text because it adds nothing.