# Loading Skeleton (/components/feedback/loading-skeleton)
Use `LoadingSkeleton` when content is loading but its layout is known. Wrap the content that will
appear so the placeholder occupies the same space.
apps/docs/src/examples/loading-skeleton/basic.tsx
```tsx
import { Box } from '@luke-ui/react/box';
import { Checkbox } from '@luke-ui/react/checkbox';
import { LoadingSkeleton } from '@luke-ui/react/loading-skeleton';
import { Text } from '@luke-ui/react/text';
import { useState } from 'react';
export default () => {
const [isLoading, setIsLoading] = useState(true);
return (
Show loading state
This text wraps across several lines to show how the skeleton follows the final content.
);
};
```
Wrap text directly when it spans several lines. The skeleton then follows the final line breaks.
## With components [#with-components]
Wrap a fixed-size element to keep its shape while it loads.
apps/docs/src/examples/loading-skeleton/custom-dimensions.tsx
```tsx
import { Box } from '@luke-ui/react/box';
import { LoadingSkeleton } from '@luke-ui/react/loading-skeleton';
export default () => {
return (
);
};
```
Set `radius` when the direct child has square corners but a visible descendant has rounded corners.
Use `radius="control"` for a `TextField`, whose input control has rounded corners inside the field
wrapper.
apps/docs/src/examples/loading-skeleton/border-radius.tsx
```tsx
import { Checkbox } from '@luke-ui/react/checkbox';
import { LoadingSkeleton } from '@luke-ui/react/loading-skeleton';
import { Stack } from '@luke-ui/react/stack';
import { TextField } from '@luke-ui/react/text-field';
import { useState } from 'react';
export default () => {
const [isLoading, setIsLoading] = useState(true);
return (
Show loading state
);
};
```
## Provider [#provider]
Use `LoadingSkeletonProvider` when one loading state controls a section. Pass `isLoading` to a child
when it needs a different loading state.
apps/docs/src/examples/loading-skeleton/provider.tsx
```tsx
import { Checkbox } from '@luke-ui/react/checkbox';
import { Code } from '@luke-ui/react/code';
import { LoadingSkeleton, LoadingSkeletonProvider } from '@luke-ui/react/loading-skeleton';
import { Stack } from '@luke-ui/react/stack';
import { Text } from '@luke-ui/react/text';
import { useState } from 'react';
export default () => {
const [isLoading, setIsLoading] = useState(true);
return (
Show loading state
This skeleton uses the loading state from its provider.
This skeleton has isLoading explicitly set to false, so
remains visible while its provider is loading.
);
};
```
## Element type [#element-type]
`LoadingSkeleton` renders a `span` by default. Set `elementType` when the parent requires another
element, such as an `li` inside a list.
apps/docs/src/examples/loading-skeleton/element.tsx
```tsx
import { LoadingSkeleton } from '@luke-ui/react/loading-skeleton';
import { Stack } from '@luke-ui/react/stack';
export default () => {
return (
List item 1
List item 2
List item 3
);
};
```
## Accessibility [#accessibility]
While loading, `LoadingSkeleton` hides its content from assistive technology and blocks focus and
pointer input. It shows the content again when `isLoading` is `false`.
## API [#api]
### LoadingSkeletonProps [#loadingskeletonprops]
### LoadingSkeletonProviderProps [#loadingskeletonproviderprops]