Skip to main content

Documentation Index

Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt

Use this file to discover all available pages before exploring further.

​
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.
Last modified on April 14, 2026