Skeleton – Code

Implementation
Skeleton.Circle Props
Skeleton.Pill Props
Skeleton.Rectangle Props
Skeleton.Text Props

Common Examples

AI Variant

Use the ai prop on any Skeleton component to apply blue gradient colors, signaling that AI-generated content is loading.

With MobX

This example shows how to use Skeleton with MobX, which is what ST app uses for data store. Refer to How to use guide for the scope of Skeleton.

import { observer } from "mobx-react-lite";
import { useState, useEffect } from "react";

const MobXExample = () => observer(() => {
  const { isLoading, data } = useStore(); // Assuming you have a MobX store

  return (
    {
      isLoading ? (
        <Card flexGrow="1" flexDirection="column" gap="2">
          <Skeleton.Circle diameter="3rem" />
          <Skeleton.Text variant="headline" />
          <Skeleton.Text rows="3"/>
        </Card>
      ) : (
        <Card flexGrow="1" flexDirection="column" gap="2">
          <Avatar name={data.name} size="large" />
          <Text variant="headline" el="p" size="small">{data.name}</Text>
          <Text>{data.description}</Text>
        </Card>
      )
    }
  )
})

Best Practices

Do not use <Suspense> as it requires the fetch to be using use() hook.

<Skeleton.Circle diameter="3rem" />

`Skeleton.Circle` Props

In addition to the props listed below, the Skeleton.Circle component can accept any valid HTML div props.

boolean

Enables the AI visual style with blue gradient colors.

string

default:"$size-8"

Must be a valid CSS value.

<Skeleton.Pill width="200px" />

`Skeleton.Pill` Props

In addition to the props listed below, the Skeleton.Pill component can accept any valid HTML div props.

boolean

Enables the AI visual style with blue gradient colors.

string

Must be a valid CSS value.

<Skeleton.Rectangle height="100px" />

`Skeleton.Rectangle` Props

In addition to the props listed below, the Skeleton.Rectangle component can accept any valid HTML div props.

boolean

Enables the AI visual style with blue gradient colors.

string

default:"$size-14"

Must be a valid CSS value.

<Skeleton.Text variant="body" rows={1} />

`Skeleton.Text` Props

In addition to the props listed below, the Skeleton.Text component can accept any valid HTML div props.

boolean

Enables the AI visual style with blue gradient colors.

number

default:"1"

Number of text lines to display. Only works with variant="body".

"body" | "headline"

default:"body"

Anvil2 Web

Resources

Skeleton – Code

Common Examples

AI Variant

With MobX

Best Practices

`Skeleton.Circle` Props

`Skeleton.Pill` Props

`Skeleton.Rectangle` Props

`Skeleton.Text` Props

​Common Examples

​AI Variant

​With MobX

​Best Practices

​Skeleton.Circle Props

​Skeleton.Pill Props

​Skeleton.Rectangle Props

​Skeleton.Text Props

Common Examples

AI Variant

With MobX

Best Practices

`Skeleton.Circle` Props

`Skeleton.Pill` Props

`Skeleton.Rectangle` Props

`Skeleton.Text` Props