Automate Skeleton Screens for Seamless UI Updates

Skeleton screens are essential for enhancing perceived performance in user interfaces. However, maintaining hand-drawn shapes that replicate your UI can be cumbersome and prone to errors with every layout change. Enter auto-skeleton, a hassle-free solution that keeps your skeletons in sync without the manual labor.

The Challenge with Traditional Skeleton Solutions

Many existing skeleton libraries require you to manually define shapes, such as lines and circles, hoping they remain relevant over time. This often results in skeletons drifting out of sync with the real UI, especially as designs evolve.

Feature Comparison

• Manual Shapes: Require constant updates as UI changes.
• CLI Snapshot Tools: Partial solutions with extra build steps.
• auto-skeleton: No configuration, real-time sync, and seamless adaptation to dynamic content.

How auto-skeleton Works

Unlike traditional methods, auto-skeleton automatically scans your real DOM at runtime. It uses getBoundingClientRect to generate accurate skeletons, eliminating the need for separate shape definitions or configuration files.

• On the first render, the DOM inside <AutoSkeleton> is scanned.
• Visible elements are measured and classified as rectangles, circles, or text blocks.
• Measurements are cached for instant reloads.
• When loading, a cached overlay displays instantly, preserving layout.

Quick Start Guides

React

Install with:

npm install @auto-skeleton/react

Use in your component:

import { AutoSkeleton } from "@auto-skeleton/react";

function UserProfile({ userId }) {
  const { data, isLoading } = useUser(userId);

  return (
    <AutoSkeleton id="user-profile" loading={isLoading}>
      <div className="profile">
        <img src={data?.avatar} data-skeleton-shape="circle" />
        <h2 data-skeleton-lines="1">{data?.name}</h2>
        <p data-skeleton-lines="3">{data?.bio}</p>
      </div>
    </AutoSkeleton>
  );
}

Vue 3

Install with:

npm install @auto-skeleton/vue

Use in your component:

<template>
  <AutoSkeleton id="user-profile" :loading="loading">
    <UserProfileCard />
  </AutoSkeleton>
</template>

Lit / Web Components

Install with:

npm install @auto-skeleton/lit lit

Use in your component:

<auto-skeleton skeleton-id="feed" .loading=${this.isLoading}>
  <feed-list></feed-list>
</auto-skeleton>

Configuration Options

• Animation: Choose between "wave", "pulse", or "none".
• Debug: Outline detected bones with dashed borders.
• Cache: Enable or disable caching of measurements.
• MinSize: Set the minimum element size to include.
• WatchDebounceMs: Set debounce delay for layout change re-scans.
• IgnoreSelectors: Define CSS selectors to skip elements.

Customization with Data Attributes

Easily adjust elements using data attributes:

• data-skeleton-ignore: Skip an element entirely.
• data-skeleton-shape="circle": Force a circular bone.
• data-skeleton-lines="N": Divide into N text-line bars.
• data-skeleton-container: Scan children individually.

Theming

Customize the skeleton appearance with CSS properties:

:root {
  --as-base: #e4e4e7;
  --as-highlight: rgba(255, 255, 255, 0.9);
}

Why auto-skeleton Matters

The real advantage of auto-skeleton lies in its ability to stay in sync with your actual UI, reducing maintenance and ensuring a consistent loading experience. By deriving skeletons from the real UI, you minimize manual intervention, allowing you to focus on development rather than upkeep.

Get Started

Try auto-skeleton today to experience a streamlined approach to skeleton screens without the tedious setup. For a live demo, documentation, and more, visit the GitHub repository.