Skullet

Smart skeleton states for React, Vue, Svelte, and vanilla JavaScript.

Installation

pnpm i skullet

Usage

import { Skeleton } from "skullet/react";

<Skeleton data={user} sample={SAMPLE_USER}>
  {(user) => <Card user={user} />}
</Skeleton>;

While it loads, the content is measured into a skeleton that takes exactly its space, so nothing moves when it arrives.

See the package README for full API documentation.

Contributing

Install dependencies

pnpm install:all

Dev/Watch Library and Example

pnpm dev

Build Library

pnpm build

Found this useful?

Follow me on Twitter.

Other projects

You might also like:

• torph - An opinionated text morphing library.
• easing.dev - Explore easing curves for your projects.
• web haptics - Haptic feedback for interactions on the web.

Acknowledgements

• Thanks to Alex for assistance with the site design.
• Thanks to Pugson for putting up with my bullshit.
• All early reviewers and testers for their valuable feedback.