components/skeleton/skeleton.react.tsx

Functions

Imports

It imports no other module of this repo. Imported by components/empty/empty.react.tsx.

Source

1import type { ReactElement } from "react";
2
3export interface SpinnerProps {
4  // What is loading, in a word or two: "Loading", "Saving".
5  label?: string;
6  // The word is for screen readers only while the arc turns (inside a button that
7  // already says what it does). Under reduced motion the word always shows.
8  hideLabel?: boolean;
9  size?: "sm" | "lg";
10  // "page": centred in the space it is given, with its word under it, for a whole page or
11  // panel that has nothing else to show yet. It is a status region.
12  layout?: "page";
13}
14
15const Arc = () => (
16  <svg className="cap-spinner-arc" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
17    <circle cx="8" cy="8" r="6" fill="none" stroke="currentColor" strokeWidth="2" opacity="0.25" />
18    <path fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" d="M8 2a6 6 0 0 1 6 6" />
19  </svg>
20);
21
22export function Spinner({ label = "Loading", hideLabel, size, layout }: SpinnerProps): ReactElement {
23  return (
24    <span className="cap-spinner" data-label={hideLabel ? "hidden" : undefined} data-size={size} data-layout={layout} role={layout === "page" ? "status" : undefined}>
25      <Arc />
26      <span className="cap-spinner-label">{label}</span>
27    </span>
28  );
29}
30
31export interface SkeletonProps {
32  lines?: number;
33  label?: string;
34}
35
36// Grey lines standing in for a page's content: busy, and "Loading" for a screen reader.
37export function Skeleton({ lines = 3, label = "Loading" }: SkeletonProps): ReactElement {
38  return (
39    <div className="cap-skeleton" aria-busy="true">
40      <span className="cap-sr-only">{label}</span>
41      {Array.from({ length: lines }, (_, i) => (
42        <span className="cap-skeleton-line" aria-hidden="true" key={i} />
43      ))}
44    </div>
45  );
46}
47
48export interface SkeletonBlockProps {
49  shape?: "block" | "circle" | "card";
50}
51
52// One shape on its own (shadcn's Skeleton): an avatar, a card. Decorative: put it inside a
53// busy region that says "Loading".
54export function SkeletonBlock({ shape = "block" }: SkeletonBlockProps): ReactElement {
55  return <span className="cap-skeleton-block" data-shape={shape === "block" ? undefined : shape} aria-hidden="true" />;
56}