# 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
Three items match your search.
);
};
```
Wrap text itself, rather than its parent, when it can span several lines. The placeholder then
follows each line without changing the layout.
## With components [#with-components]
Wrap an element to keep its dimensions while the skeleton covers it. Use this for controls, avatars,
and other content with a fixed shape.
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.
A `TextField` is a typical case, because its input control has rounded corners inside the field
wrapper.
apps/docs/src/examples/loading-skeleton/border-radius.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 { TextField } from '@luke-ui/react/text-field';
import { useState } from 'react';
export default () => {
const [isLoading, setIsLoading] = useState(true);
return (
Loading
);
};
```
## Loading state [#loading-state]
`isLoading` is `true` by default. Set it to `false` when the content is ready. The component then
returns its children without a wrapper.
```tsx
```
Use `LoadingSkeletonProvider` when one loading state controls a section. Its value overrides
`isLoading` on every descendant skeleton, so a section changes together.
apps/docs/src/examples/loading-skeleton/provider.tsx
```tsx
import { Box } from '@luke-ui/react/box';
import { Checkbox } from '@luke-ui/react/checkbox';
import { LoadingSkeleton, LoadingSkeletonProvider } 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 (
No local prop
Three items match your search.
isLoading
Results updated a moment ago.
{'isLoading={false}'}
Nothing else to show.
Provider 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';
export default () => {
return (
List item
);
};
```
## Accessibility [#accessibility]
While loading, `LoadingSkeleton` hides content from assistive technology, removes it from the tab
order, and blocks pointer input. It becomes available again when `isLoading` is `false`.
## API [#api]
### LoadingSkeletonProps [#loadingskeletonprops]
### LoadingSkeletonProviderProps [#loadingskeletonproviderprops]