shadcn.io is not affiliated with official shadcn/ui
File Tree Skeleton Block for Solid
A browser IDE's explorer that loads in place: the heading and a working Collapse all stay while ten indented bars become three folders and nine files in a fixed-height tree.
Installation
Overview
Show a file explorer while its project loads, then swap the tree in without moving anything, with this file tree skeleton for Solid with Ark UI. A hairline frame with a plus mark on each corner holds the heading "Explorer", a real Collapse all button and a tree frame of a fixed height, from Toadflax, a browser IDE. The heading and the button are real from the first paint; the entries are indented bars with an icon square that become the catalog Tree View in the same frame when you press Load: three folders and nine files, the first two folders open, with a file icon chosen by each file's extension and a count on each folder. Collapse all really folds the tree, choosing a file says it isn't opened in this demo, and the frame scrolls inside, so the panel keeps its height. It's built from Tree View, Skeleton, Button and Guides, with a CSS entrance only. For IDEs, repository browsers and any tree that waits for a query.
FAQ
What stays local, and how do I wire it to a real query?
Nothing is fetched. The twelve entries are typed in SRC, TESTS and PUBLIC and turned into the tree's collection once. 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 does Collapse all do?
It folds every open folder, for real, and says so in the polite line. It is a button from the first paint, but while the tree is loading it is marked as disabled and does nothing, because there is no tree yet. Reload opens the first two folders again.
Does the frame change size while it loads?
No. The tree frame is a fixed 20 rem tall and scrolls inside, and the bars and the tree share one grid cell, so opening the third folder or collapsing them all never moves the heading above or the line below. The bars draw the tree with its first two folders open, which is how it loads.
How do I use it from the keyboard?
The loaded tree is the catalog Tree View: one tab stop, Up and Down move between visible rows, Right and Left open and close a folder (or move into and out of it), Home and End jump to the ends, and Enter chooses a file. Folder chevrons mirror in a right-to-left page.
Is it accessible?
The region is marked busy while it loads and carries a screen-reader-only "Loading files…", 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 tree has an accessible name, folders announce whether they are open, and file names are shown left to right in any page direction.