SentinelRow

A decorative sentinel row shared by every list-shaped compound component that renders a trailing loading placeholder.

Review requested on #412

sergiodxa · Second-factor authentication backoff

Monitor degraded

api.sdxc.dev answered in 4.2s for 5 minutes

New comment on ADR-035

“Can the backoff be per subject rather than per IP?”

Loading more…

View code

<div role="feed" aria-busy="true" aria-label="Notifications">
	{loaded.map((entry) => (
		<Item key={entry.id}>
			<Item.Media>
				<GitPullRequestIcon aria-hidden="true" />
			</Item.Media>
			<Item.Content>
				<Item.Title>{entry.title}</Item.Title>
				<Item.Description>{entry.description}</Item.Description>
			</Item.Content>
		</Item>
	))}

	<Separator />

	<SentinelRow mix={[gap(2)]}>
		<Spinner size="sm" mix={[spin()]} aria-label="Loading more notifications" />
		Loading more…
	</SentinelRow>
</div>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui

import "@sdxc/ui/theme.css";

Usage

import { SentinelRow } from "@sdxc/ui";

Renders a decorative sentinel row: a <div> styled as centered, muted small text, ready to hold whatever loading indicator or "load more" trigger a paired enhancement supplies as children.

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.