Loader

Spinner that tells screen readers what is loading (role="status"). Its own SVG, not an icon: a faint track and an arc that grows and turns, in CSS only.

Loading runs

import { Loader } from "@etched/reticle/loader";

export function Preview() {
  return <Loader aria-label="Loading runs" />;
}

Installation

import { Loader, SkeletonLine } from "@etched/reticle/loader";

Examples

Sizes

LoadingLoadingLoading

import { Loader, type LoaderSize } from "@etched/reticle/loader";

const sizes: LoaderSize[] = ["sm", "base", "lg"];

export function Sizes() {
  return (
    <div className="row">
      {sizes.map((s) => (
        <Loader key={s} size={s} />
      ))}
    </div>
  );
}

Inline, with its own label

Chip SH-24A-0193 Loading chip status is being checked.

import { Loader } from "@etched/reticle/loader";

export function InlineWithItsOwnLabel() {
  return (
    <p>
      Chip SH-24A-0193 <Loader size="sm" aria-label="Loading chip status" /> is being checked.
    </p>
  );
}

Page

page fills the space it is given and centers the spinner, for example as a Suspense fallback.

Loading referrals

import { Loader } from "@etched/reticle/loader";

const frame = { display: "flex", blockSize: "14rem", borderRadius: "var(--et-radius-lg)", boxShadow: "inset 0 0 0 1px var(--et-line)" };

export function Page() {
  return (
    <div style={frame}>
      <Loader page aria-label="Loading referrals" />
    </div>
  );
}

Skeleton lines

A line is as tall as a line of the text around it, so the layout does not move when the text arrives.

Owner

import { SkeletonLine } from "@etched/reticle/loader";

const ring = { borderRadius: "var(--et-radius-lg)", boxShadow: "inset 0 0 0 1px var(--et-line)", paddingInline: "var(--et-space-3)" };

export function SkeletonLines() {
  return (
    <div className="grid">
      <div>
        <div style={{ fontSize: "var(--et-text-heading)", lineHeight: "var(--et-leading-heading)", inlineSize: "40%" }}>
          <SkeletonLine />
        </div>
        <SkeletonLine />
        <SkeletonLine />
        <SkeletonLine style={{ inlineSize: "60%" }} />
      </div>
      <div className="row" style={{ flexWrap: "nowrap" }}>
        <span>Owner</span>
        <SkeletonLine style={{ inlineSize: "8rem" }} />
      </div>
      <div style={ring}>
        <SkeletonLine style={{ blockSize: "var(--et-control-base)" }} />
      </div>
    </div>
  );
}

API reference

Prop	Type	Default	Description
size	"sm" \| "base" \| "lg"	"base", or "lg" with `page`
aria-label	string	"Loading"	Names the status, and screen readers announce it. Pass translated text.
page	boolean	–	Fill the space it is given and center the spinner. For a page or panel that loads, for example a Suspense fallback.