Skeleton

Placeholder blocks shown while content is loading, reducing user wait anxiety.

Basic Usage

import { Skeleton } from '@airo-ui/react'

function Demo() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <Skeleton width="100%" height={20} />
      <Skeleton width="48px" height="48px" rounded />
      <Skeleton width="100%" height={120} />
    </div>
  )
}

Disable Animation

<Skeleton width="300px" height={100} animated={false} />

With Children (Loading Wrapper)

import { useState } from 'react'

function Demo() {
  const [loading, setLoading] = useState(true)

  return (
    <Skeleton animated={loading}>
      {!loading && <ContentComponent />}
    </Skeleton>
  )
}

API

Props

Name	Type	Default	Description
width	string | number	--	Width
height	string | number	20	Height
rounded	boolean	false	Full border-radius (for circle/avatar)
animated	boolean	true	Show shimmer animation
children	React.ReactNode	--	Content to render when not loading

Interaction

• Shows shimmer sweep animation by default
• Animation disabled with prefers-reduced-motion