loading
Background Task Row
Keeps a long-running task compact and persistent while the user continues working elsewhere.
- loading
- background
- task
- queued
- progress
A task row preserves status and retry access without blocking the main product surface.
Live preview
Generating preview
Running · 42%
Quick usage
import { BackgroundTaskRow } from "@pinky-ui/systems";
<BackgroundTaskRow label="Generating preview" />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.
npm install @pinky-ui/systemspnpm add @pinky-ui/systemsyarn add @pinky-ui/systemsnpx pinky-ui add background-task-rowPrefer to run the whole repository locally instead?
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run devAccessibility
- 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
Keep long-running work compact and persistent while the user continues elsewhere in the product.
Use when
Generating, exporting, indexing or processing can leave the initiating surface without losing inspect, retry or completion access.
Avoid
Blocking the main screen with a modal loader, hiding a failure after completion, or turning every short request into a task centre.
Accessibility
Expose task state and determinate progress in text and progress semantics. Retry and inspect actions must be named by the task.
Keyboard and touch
Keep the row actions reachable in the available width and stack metadata on mobile. Do not make hover the only way to reveal status.
Reduced motion and performance
Use discrete progress updates and a static state fallback when motion is reduced. Clean host-owned async work when the row unmounts.
Composition and anti-patterns
Use Queued Action when the important state is waiting to start. Use Completion Morph when the task's surface should become a result.