shadcn.io is not affiliated with official shadcn/ui
Command Palette Skeleton Block for Svelte
A project switcher's command palette shown open while its results load: the search field, the Recent and Actions labels and the key hints stay while bars become six results.
Installation
Overview
Show a command palette while its results load, then swap them in, with this command palette skeleton for Svelte with Ark UI. It belongs to Scabious, a project switcher: the Projects page has a search field in its header, and the palette is drawn open over a drawing of the page inside a hairline frame with a plus mark on each corner. The Command search field, the two group labels, Recent and Actions, and the foot with its key hints are real from the first paint; the six results are Skeleton rows that become the real list, each with an icon, a name and an Alt shortcut, when you press Load in the foot. Once loaded the field narrows the list, an empty state names what you typed, Alt and a letter choose a result, and choosing a project goes there while an action says it is not wired in this demo. For preview the palette is drawn open in place; the header's search field, or Ctrl or ⌘ K while focus is inside the block, opens the real dialog with the same rows. It's built from Command, Skeleton, Kbd and Button, with a CSS entrance only. For project switchers, global search and any palette that waits for a query.
FAQ
Why is the palette already open, and what do I keep?
So you can see it without a click. On load the palette is the catalog Command drawn inline over the page, a plain shell that traps and focuses nothing, so the page around the preview keeps working. The search field, or Ctrl or ⌘ K while focus is inside the block, opens the real command dialog with the same rows, the same query and the same phase, and the copy stays closed until a reload. In your app keep the command dialog and drop the copy: the "in-place" state, the scrim and its shell, and the Escape and blur effects.
What stays local, and how do I wire it to a real query?
Nothing is fetched. The six results are typed in ENTRIES and choosing one only changes the drawn page's title or says an action is not wired. 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.
What are the rows while it loads?
Bars under the same two group labels, so the labels never change. The list is not mounted while it loads, so there is nothing to highlight or choose and the shortcuts do nothing until the data is in. Typing in the field still works and applies once the list is there.
What do the Alt shortcuts do?
While the palette is open and loaded, Alt (Option on a Mac) and the letter shown on a row choose it, read from the key's code so Option's special characters don't matter. The shortcut that opens the palette, Ctrl or ⌘ K, only works while focus is inside the block, because the site's own search owns that key elsewhere.
Is it accessible?
The region is marked busy while it loads and carries a screen-reader-only "Loading results…", 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 palette is named, the field is the first control, the rows are options of one list, the shortcuts are hidden from assistive technology, and the loaded count is spoken once.