Skeleton

Use to show a placeholder while content is loading.

import { Skeleton } from "@smartacteam/ambient-web/skeleton";

export function SkeletonDemo() {
  return (
    <div className="flex items-center gap-4">
      <Skeleton className="size-12 rounded-full" />
      <div className="flex flex-col gap-2">
        <Skeleton className="h-4 w-62" />
        <Skeleton className="h-4 w-50" />
      </div>
    </div>
  );
}

Usage

import { Skeleton } from "@smartacteam/ambient-web/skeleton";

<Skeleton />

Lines of text

SkeletonText stands in for one line of text. Its box is one line tall and its bar one em tall, centered in the box, both read from the surrounding font size and line height, so a row keeps the height its text will have. className sets the width.

import { SkeletonText } from "@smartacteam/ambient-web/skeleton";

<dd className="text-sm">
  {loading ? <SkeletonText className="w-32" /> : customer.email}
</dd>

Shape a screen's skeleton like the finished screen: real headings and labels, with bars only where values go. The Loading pattern covers how.

Examples

Avatar

import { Skeleton } from "@smartacteam/ambient-web/skeleton";

export function SkeletonAvatarDemo() {
  return (
    <div className="flex w-fit items-center gap-4">
      <Skeleton className="size-10 shrink-0 rounded-full" />
      <div className="grid gap-2">
        <Skeleton className="h-4 w-62" />
        <Skeleton className="h-4 w-50" />
      </div>
    </div>
  );
}

Card

Next visit

Technician
Arrival

import { Card } from "@smartacteam/ambient-web/card";
import { SkeletonText } from "@smartacteam/ambient-web/skeleton";

export function SkeletonCardDemo() {
  return (
    <Card.Root className="w-full max-w-xs" aria-busy>
      <p className="sr-only">Loading visit…</p>
      <Card.Header>
        <Card.Title>Next visit</Card.Title>
        <Card.Description className="text-sm leading-5">
          <SkeletonText className="w-40" />
        </Card.Description>
      </Card.Header>
      <Card.Content>
        <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 text-sm leading-5">
          <dt className="text-text-secondary">Technician</dt>
          <dd>
            <SkeletonText className="w-28" />
          </dd>
          <dt className="text-text-secondary">Arrival</dt>
          <dd>
            <SkeletonText className="w-24" />
          </dd>
        </dl>
      </Card.Content>
    </Card.Root>
  );
}

Form

Company name

Phone

import { Button } from "@smartacteam/ambient-web/button";
import { Field } from "@smartacteam/ambient-web/field";
import { Skeleton } from "@smartacteam/ambient-web/skeleton";

export function SkeletonFormDemo() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-6" aria-busy>
      <p className="sr-only">Loading company profile…</p>
      {["Company name", "Phone"].map((label) => (
        <Field.Root key={label}>
          <Field.Label>{label}</Field.Label>
          {/* The filled input's box: `Input.Text`'s `h-9` and `rounded-md`. */}
          <Skeleton className="h-9 w-full" />
        </Field.Root>
      ))}
      <Button className="self-start" disabled>
        Save
      </Button>
    </div>
  );
}

Table

import { Skeleton } from "@smartacteam/ambient-web/skeleton";

export function SkeletonTableDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      {Array.from({ length: 5 }).map((_, index) => (
        <div className="flex gap-4" key={index}>
          <Skeleton className="h-4 flex-1" />
          <Skeleton className="h-4 w-24" />
          <Skeleton className="h-4 w-20" />
        </div>
      ))}
    </div>
  );
}

Text

import { SkeletonText } from "@smartacteam/ambient-web/skeleton";

export function SkeletonTextDemo() {
  return (
    <div className="w-full max-w-xs text-sm">
      <SkeletonText />
      <SkeletonText />
      <SkeletonText className="w-3/4" />
    </div>
  );
}