You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
26 lines
811 B
TypeScript
26 lines
811 B
TypeScript
/** Loading + error surfaces — every page swaps its "Loading…" text for these. */
|
|
|
|
const WIDTHS = ['92%', '70%', '84%', '55%', '78%']
|
|
|
|
export function Skeleton(props: { rows?: number }) {
|
|
const rows = props.rows ?? 3
|
|
return (
|
|
<div className="wf-skel" aria-busy="true" aria-label="Loading">
|
|
{Array.from({ length: rows }, (_x, i) => (
|
|
<div key={i} className="wf-skel-bar" style={{ width: WIDTHS[i % WIDTHS.length] }} />
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function ErrorState(props: { message: string; onRetry?: () => void }) {
|
|
return (
|
|
<div className="wf-error" role="alert">
|
|
<span className="msg">{props.message}</span>
|
|
{props.onRetry !== undefined && (
|
|
<button type="button" className="wf" onClick={props.onRetry}>Try again</button>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|