Boneyard — Auto-Generated Skeleton Loading Framework

Introduction

Boneyard solves a persistent frontend pain point: keeping skeleton loading screens in sync with actual UI components. Instead of hand-coding gray placeholder boxes that drift out of date with every design change, Boneyard analyzes your rendered components and generates matching skeleton screens automatically.

What Boneyard Does

• Analyzes rendered component DOM to generate matching skeleton layouts
• Produces animated loading placeholders that mirror actual component dimensions
• Supports React, Vue, and vanilla HTML components
• Provides build-time static generation and runtime dynamic generation modes
• Handles responsive layouts with breakpoint-aware skeleton adaptation

Architecture Overview

Boneyard works in two phases. At build time (or on first render), it captures the DOM structure of a component, identifies visual blocks (text, images, buttons), and maps them to skeleton primitives. These primitives are stored as lightweight JSON descriptors. At runtime, when data is loading, Boneyard renders the skeleton from the descriptor with CSS animations. The descriptor updates automatically when the component structure changes.

Self-Hosting & Configuration

• Install via npm for React or Vue projects
• Configure animation style (pulse, wave, shimmer) in boneyard.config.js
• Set component-level overrides for custom skeleton shapes
• Build-time extraction runs as a Vite or Webpack plugin
• No external dependencies or network requests required

Key Features

• Zero-maintenance skeleton screens that stay in sync with components
• Multiple animation styles configurable per component
• Framework adapters for React, Vue, and plain HTML
• Build-time static generation for optimal performance
• Responsive-aware skeletons that adapt to viewport changes

Comparison with Similar Tools

• react-loading-skeleton — requires manual dimension specification; Boneyard auto-detects
• Material UI Skeleton — generic shapes you position manually; Boneyard matches your actual layout
• Ant Design Skeleton — predefined templates; Boneyard generates from your real components
• Contentloader — SVG-based manual drawing; Boneyard automates the entire process

FAQ

Q: Does it work with server-side rendering? A: Yes, Boneyard supports SSR by pre-generating skeleton descriptors at build time and hydrating them on the client.

Q: How does it handle dynamic content? A: Boneyard uses the most recent successful render to update its skeleton descriptor. Components that change structure significantly between renders can use manual hints.

Q: Does it increase bundle size? A: The runtime is under 3KB gzipped. Skeleton descriptors are typically 100-300 bytes per component.

Q: Can I customize individual skeleton elements? A: Yes, you can annotate DOM elements with data-skeleton attributes to override shape, color, or animation for specific parts.

Sources

• https://github.com/0xGF/boneyard