Skeleton - Web

For development, import Skeleton from @servicetitan/anvil2. For design, find it in the Anvil2 file.

Anatomy

The Skeleton consists of two primary elements that work together to create placeholders for content which hasn’t yet loaded.

Fill
Container

Options

The Skeleton supports text and shape configurations to accommodate various content placeholder scenarios.

Text

Headline

Use the headline option to indicate loading of a title.

Body Text

Use the body text option to indicate loading of a sentence, string of text, or a paragraph.

Shape

Rectangle

Use the rectangle option to indicate loading of card, button, image, or sectional content.

Circle

Use the circle option to indicate loading of an avatar.

Pill

Use the pill option to indicate loading of a chip.

AI

Use the AI option to indicate loading of AI-generated content. All Skeleton variants support an AI style that replaces the default gray gradient with blue gradient colors.

Usage Guidelines

Standard	Requirement
DoKnown approximate UI shape	When the implementation knows the approximate UI that is to be loaded
DoInitial page load	When loading page initially
DoPagination, filtering, or search loads	When loading content through pagination, filtering, or searching
DoLoading dynamic content	When loading dynamic content initially. Dynamic content requires an external service to provide it, such as Combobox items, a table, or a card grid.
DoMatch the variant to the content shape	Use Skeleton Text (headline variant for a title, body variant for a sentence, string of text, or paragraph), Skeleton Rectangle for a card, button, image, or section, Skeleton Circle for an avatar, and Skeleton Pill for a chip; use the AI option on any variant for AI-generated content.
Don’tSub-second loads	Do not show Skeleton or any loading state if loading takes less than 1 second. Content loading in less than 1 second keeps the user’s flow of thought seamless.
Don’tLoading additional content	Use Spinner for loading additional content, for example in infinite scrolling experiences

How to Use

Skeletonized UI should be an approximation of the UI that is loading and not meant to recreate every element that will load.

Scope of skeleton

Apply Skeleton to everything in the same scope. In this context, scope refers to component that is awaiting for the data to be fetched.

Full Skeleton
- Fetching data to render grid of cards → everything inside the Card is skeletonized
- Fetching table data → table is skeletonized everything inside the Table is skeletonized
Partial Skeleton
- Card as a section containing title and content that requires fetch
  - Title is not part of the fetch scope, so this is static and not to be skeletonized
  - Example of fetch content: Listbox with dynamic options, data visualization, score card (label + data number)
  - Note that if there is higher level fetch that affects other sibling, this Card can also be fully skeletonized. Example: Jira ticket type of page level loading

Repeated content

For repeated content, use skeleton to fill up 3/4 of the available space. For example, even if a grid of Cards are expected to overflow, only fill 3/4 of the available space with the skeleton.

Non-repeated content

For non-repeated content, keep it above the fold as much as possible

This is to reduce unnecessary scrolling of the page while contents are still loading in
Approximation of the UI can be minified to keep things above the fold
- Example: Even if we expect a long blog post, it can be reduced to a two-paragraph skeleton to keep it above the fold.

Example

Content

Content within the Skeleton should approximate the UI that is loading without recreating every element.

Keyboard Interaction

Skeletons are not focusable and do not support keyboard interaction.

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"

Concepts & Guidelines

Anvil2

Resources

Skeleton - Web

Anatomy

Options

Text

Headline

Body Text

Shape

Rectangle

Circle

Pill

AI

Usage Guidelines

How to Use

Scope of skeleton

Repeated content

Non-repeated content

Example

Content

Keyboard Interaction

Code

Common Examples

AI Variant

With MobX

Best Practices

`Skeleton.Circle` Props

`Skeleton.Pill` Props

`Skeleton.Rectangle` Props

`Skeleton.Text` Props

​Anatomy

​Options

​Text

​Headline

​Body Text

​Shape

​Rectangle

​Circle

​Pill

​AI

​Usage Guidelines

​How to Use

​Scope of skeleton

​Repeated content

​Non-repeated content

​Example

​Content

​Keyboard Interaction

​Code

​Common Examples

​AI Variant

​With MobX

​Best Practices

​Skeleton.Circle Props

​Skeleton.Pill Props

​Skeleton.Rectangle Props

​Skeleton.Text Props

Anatomy

Options

Text

Headline

Body Text

Shape

Rectangle

Circle

Pill

AI

Usage Guidelines

How to Use

Scope of skeleton

Repeated content

Non-repeated content

Example

Content

Keyboard Interaction

Code

Common Examples

AI Variant

With MobX

Best Practices

`Skeleton.Circle` Props

`Skeleton.Pill` Props

`Skeleton.Rectangle` Props

`Skeleton.Text` Props