Skeleton

A skeleton is a placeholder shown while data loads. It is a CSS class, not a component: add Classes.SKELETON to any element.

Usage#

import { Classes } from "@clawscale/react";

<H5 className={loading ? Classes.SKELETON : undefined}>orders_daily</H5>

In a React Server Component, import Classes from @clawscale/react/common.

The element keeps its size, so the layout does not shift when the data arrives. Its content is hidden, it glows, and it ignores the pointer. The glow stops for users who prefer reduced motion.

Examples#

Loading state#

Toggle the switch. The first card puts the class on its heading, text and button, which keeps the shape of the content. The second card takes the class itself and shows one block.

orders_daily

3.4M rows in 24 columns. Refreshed hourly from raw.orders.

revenue_by_region

12K rows in 8 columns. Refreshed daily at 02:00 UTC.

core/skeleton/basic.tsx

import { Button, Card, Classes, H5, Switch } from "@clawscale/react";
import { useState } from "react";

export default function SkeletonBasic() {
  const [loading, setLoading] = useState(true);
  const skeleton = loading ? Classes.SKELETON : undefined;
  return (
    <div style={{ display: "grid", gap: 12, maxWidth: 420, width: "100%" }}>
      <Switch checked={loading} label="Loading" onChange={(event) => setLoading(event.currentTarget.checked)} />
      <Card>
        <H5 className={skeleton}>orders_daily</H5>
        <p className={skeleton}>3.4M rows in 24 columns. Refreshed hourly from raw.orders.</p>
        <Button aria-label="Open table" className={skeleton} disabled={loading} icon="th" text="Open table" />
      </Card>
      <Card className={skeleton}>
        <H5>revenue_by_region</H5>
        <p>12K rows in 8 columns. Refreshed daily at 02:00 UTC.</p>
      </Card>
    </div>
  );
}