How it Works
What happens when you wrap a component with <Skeleton>.
Understanding Modern Web Performance
Layout shift occurs when visible elements move during page load. It impacts both user experience and search rankings.
Understanding Modern Web Performance
Layout shift occurs when visible elements move during page load. It impacts both user experience and search rankings.
Boneyard generates skeletons at build time — not at runtime. Here's the three-step flow:
1. Wrap
Wrap your component with <Skeleton name="blog-card" loading={isLoading}>. When loading is false, your children render normally.
2. Build
Run bun boneyard-svelte build. This launches a headless browser, visits your app at multiple
breakpoints, and measures the exact pixel positions, sizes, and
border radii of every visible element inside each named <Skeleton>.
3. Render
Import the generated registry once in your app entry. When loading is true, boneyard looks up the pre-generated bones by name and renders
them matching the exact position from the real layout.