Chapter 02 of 11·Getting started

Quick start

One wrapper component is the entire integration. No skeleton components to write, ever.

Wrap any subtree. While loading is true, skelly renders a skeleton with the exact same geometry as the wrapped content.

Profile.jsxreact

import { Skelly } from 'use-skelly/react'

function Profile({ userId }) {
  const { data, isLoading } = useUser(userId)
  return (
    <Skelly loading={isLoading}>
      <ProfileCard user={data} />
    </Skelly>
  )
}

That's the whole integration. skelly measures avatars, text lines, images, buttons, and table cells from the child's actual rendered layout — no configuration, no skeleton components to write.