Skeleton Component

A placeholder component used to indicate loading state before content is available.

import { Skeleton } from "@locus-ui/components";
<Skeleton variant="solid" style={{ width: 200, height: 24 }} />

View Source

Anatomy

Import the component and its parts:

Anatomy

import { Skeleton } from "@locus-ui/components";
<Skeleton />

Examples

Variants

Skeleton components come with three built-in variants: solid, pulse, and shimmer.

solid

pulse

shimmer

variants.tsx

import { Skeleton } from "@locus-ui/components";
const variants = ["solid", "pulse", "shimmer"];
return variants.map((variant) => (  <Skeleton    key={variant}    variant={variant}    style={{ width: 200, height: 24 }}  />));

Loading State

Use the loading prop to toggle between the skeleton and its children. When loading is false, the children are rendered instead of the skeleton placeholder.

This is the content

Loaded

This is the content

loading.tsx

import { Skeleton } from "@locus-ui/components";import { Grid, Text } from "@locus-ui/components";
<Grid columns="2" gap="2">  <Text>Loading</Text>  <Skeleton    loading={true}    variant="pulse"  >    <Text>This is the content</Text>  </Skeleton>

Composition

Skeletons can be composed to represent more complex loading layouts.

composition.tsx

import { Skeleton } from "@locus-ui/components";import { Flex } from "@locus-ui/components";
<Flex direction="column" gap="2">  <Skeleton variant="pulse" style={{ width: 120, height: 12 }} />  <Skeleton variant="pulse" style={{ width: 200, height: 12 }} />  <Skeleton variant="pulse" style={{ width: 160, height: 12 }} /></Flex>