shadcn.io is not affiliated with official shadcn/ui
Code Editor Skeleton Block for Solid
A browser code editor in a window that loads in place: the gutter and tab strip stay while bars become three file names and fourteen lines of TypeScript, and a tab press loads that file.
Installation
Overview
Show an editor while its files load, then swap the code in without moving anything, with this code editor skeleton for Solid with Ark UI. A framed window for Sainfoin, a browser code editor, has a top bar with the editor's name and a Load control, a strip of three file tabs and the code in mono type beside a gutter of line numbers that runs down to the window's foot, as an editor's does. The window, the gutter and the tab strip are real from the first paint; the file names, the fourteen lines of the open file and their indentation are Skeleton bars that become the data in the same cells when you press Load. Pressing another Tabs tab loads that file's own typed lines, so the tabs are a reload source. The code is colored by the theme's own tokens and cannot be edited here. The window keeps its height and only the strip and the code scroll. It's built from Skeleton, Tabs, Button and Guides, with a CSS entrance only. For online editors, file viewers and any code that waits for a query.
FAQ
What stays local, and how do I wire it to a real query?
Nothing is fetched. The three files are typed in FILES, fourteen lines each, and the tab you press picks which one is shown. 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 pressing a tab do?
It is a reload source: the press selects that file and goes back to the bars, and a moment later that file's own lines come in. A press while it is already loading is ignored, so a quick second press doesn't restart the wait. The tab names are bars until the first load, and each tab carries its file name as its accessible name from the start.
Does the window change size while it loads?
No. The window has a fixed height and only the tab strip and the code scroll. Every line is a fixed 24 pixels with a bar and its code in one grid cell, every file has the same number of lines, and the gutter runs past the code in both phases, so nothing moves when the data arrives or when you change file.
Can I type in the editor?
No. This block is the loading state of an editor, not the editor: the code is read-only text with no caret, selection tools or saving. Put your editor component where the code region is, and keep the gutter and the bars so the loading state still matches it.
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 strip is a tab list with one tab panel per file, the code region is named for its file and can be focused to scroll, and the code stays left to right in any page direction.