Skip to content
Sarj Standards

TypeScript · maintainability

no-hand-rolled-spinner

eslint:no-hand-rolled-spinner

Disallow intrinsic elements styled as Tailwind border-ring spinners outside the design-system implementation.

Default
error
Fix
none
Languages
typescript

Why

One-off loading indicators duplicate a shared primitive and let accessibility and styling diverge.

Fix

Render the design-system Spinner component instead.

Before / after

Executed by this rule’s unit tests.

Before

Do not rebuild a spinner

src/loading-state.tsx · focus
<div className="size-4 animate-spin rounded-full border-2 border-t-transparent" />

After

Use the shared spinner

src/loading-state.tsx · focus
<Spinner className="size-4" />

Limits

  • Only static className values on div and span elements are inspected.

Message IDs

handRolledSpinner