# Skeleton
URL: /lynx/components/skeleton
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/lynx/components/skeleton.mdx

콘텐츠가 로딩되는 동안 이후 나타날 요소의 윤곽을 미리 보여주어 로딩 시간을 짧게 느끼게 하는 UI 요소입니다.

Lynx Engine 최소 버전: 3.6

사용 가능 버전: @seed-design/lynx-react@0.8.0, @seed-design/lynx-css@0.12.0

## Preview

```tsx
import "./styles";

import { Skeleton, useSeedClassName, VStack } from "@seed-design/lynx-react";

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-skeleton-root`}>
      <view className="skeleton-preview">
        <VStack gap="x4" align="center">
          <Skeleton radius="full" width="48px" height="48px" />
          <VStack gap="x2">
            <Skeleton radius="8" width="250px" height="16px" />
            <Skeleton radius="8" width="250px" height="16px" />
          </VStack>
        </VStack>
      </view>
    </view>
  );
}
```

## Installation

- npm: npm install @seed-design/lynx-react @seed-design/lynx-css
- pnpm: pnpm add @seed-design/lynx-react @seed-design/lynx-css
- yarn: yarn add @seed-design/lynx-react @seed-design/lynx-css
- bun: bun add @seed-design/lynx-react @seed-design/lynx-css

<Callout>
  Lynx `Skeleton`은 별도 `ui:skeleton` snippet 없이 `@seed-design/lynx-react` 패키지에서 직접 제공합니다.
</Callout>

## Usage

```tsx
import { Skeleton } from "@seed-design/lynx-react";
```

```tsx
<Skeleton />
```

## Props

## Examples

### Radius

```tsx
import "./styles";

import { HStack, Skeleton, useSeedClassName } from "@seed-design/lynx-react";

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-skeleton-root`}>
      <view className="skeleton-preview">
        <HStack gap="x4" align="center">
          <Skeleton radius="0" width="48px" height="48px" />
          <Skeleton radius="8" width="48px" height="48px" />
          <Skeleton radius="16" width="48px" height="48px" />
          <Skeleton radius="full" width="48px" height="48px" />
        </HStack>
      </view>
    </view>
  );
}
```

### Tone

```tsx
import "./styles";

import { Skeleton, useSeedClassName, VStack } from "@seed-design/lynx-react";

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-skeleton-root`}>
      <view className="skeleton-preview">
        <VStack gap="x4" align="flex-start" width="full">
          <Skeleton tone="neutral" radius="16" width="full" height="48px" />
          <Skeleton tone="magic" radius="16" width="full" height="48px" />
        </VStack>
      </view>
    </view>
  );
}
```

## 웹 버전과의 차이

- 웹은 HTML `<div>`와 CSS pseudo-element로 shimmer를 렌더링하고, Lynx는 네이티브 `<view>` root와 shimmer child를 렌더링합니다.
- Lynx는 Skeleton을 장식 요소로 취급해 root와 shimmer child를 `accessibility-elements-hidden`으로 접근성 트리에서 숨깁니다.
- Lynx 공개 API는 `radius`, `tone`, `width`, `height`, `className`, `style`, root `<view>` ref를 제공하며 children, 이벤트, 상태 API는 제공하지 않습니다.