Skip to content
Pinky UI

loading

Queued Action

Makes accepted-but-not-yet-started work visible before it enters active processing.

  • loading
  • queue
  • pending
  • processing
  • position
Related pattern

Queue acceptance is a distinct state from background execution and should not look like an idle button.

Live preview

Export report

Queued · #2 · waiting for capacity

queued

Quick usage

usage
import { QueuedAction } from "@pinky-ui/systems";

<QueuedAction label="Export report" queuePosition={2} />

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Accessibility

  • Pointer and keyboard paths expose the same state change.
  • Status and focus remain meaningful when motion is disabled.

Performance

  • Uses local state and transforms; no per-frame React pointer loop.

Reduced motion

Resolves state changes without layout animation while preserving semantics.

When to use

  • Product workflows with a clear reversible or inspectable state.

When not to use

  • Decorative motion without a user task.

Skill

Purpose

Make accepted-but-not-yet-started work visible before it enters active processing.

Use when

Capacity, sequencing or a shared worker means an action can be accepted now but cannot begin immediately.

Avoid

Calling queued work idle, implying that processing already started, or inventing a queue position the product cannot support.

Accessibility

State accepted, queued, active and complete in text. A queue position is supplemental and must not be the only status signal.

Keyboard and touch

Queue, start and retry actions are native buttons with comfortable targets. The waiting state must be readable without hover.

Reduced motion and performance

Swap discrete states without animated reordering when motion is reduced. Avoid polling or duplicate enqueue calls from repeated activation.

Composition and anti-patterns

Use Background Task Row after work leaves the queue. A progress bar alone cannot communicate that the operation has not started.

Open this skill on its own page