Loading Statesby Owl-Listener

Loading States Skill.

Show what is happening during a wait without misleading people about progress.

Interaction Design
Loading UX

Source Review · Loading StatesSKILL.md

Task Interaction Design Produces • A loading-pattern decision for each delayed operation. • Transition notes covering reserved space and scroll preservation. • Long-wait, cancellation, and optimistic-failure behavior. Before You Start Accurate operation timing and progress capabilities must come from the product or implementation team.

Editorial summary · source reviewed 2026-10-07 · not a generated example

01 What It Does

Make Waiting States Understandable

Choose feedback for delayed operations and specify how real results replace loading or optimistic states.

Source-based workflowNot an execution benchmark

The Working Approach

Loading States distinguishes waiting patterns by what the interface knows: the shape of incoming content, whether progress is measurable, and whether an action can safely be shown optimistically. It covers skeletons, determinate and indeterminate indicators, progressive reveal, and placeholders.

Its guidance also addresses the transition out of loading. Real content should not unexpectedly shift the layout or reset the user's scroll position. Optimistic changes require reconciliation and rollback; a fast-looking success state is not appropriate if failure leaves the interface untrustworthy.

Expected Deliverables

A loading-pattern decision for each delayed operation.
Transition notes covering reserved space and scroll preservation.
Long-wait, cancellation, and optimistic-failure behavior.

See the Example Brief

From Brief to Review

01
Classify the Wait
Identify expected duration, known content structure, measurable progress, and whether the operation can be canceled.
02
Choose Honest Feedback
Use skeletons for predictable shapes and progress bars only when progress is known. Define rollback before adopting optimistic feedback.
03
Test Arrival and Failure
Review slow connections, content replacement, layout stability, and motion preferences.

02 When to Use It

When to Use It

Accurate operation timing and progress capabilities must come from the product or implementation team.

A Good Fit

Data-Heavy ScreensUseful when partial content can arrive before the entire view is ready.
Optimistic InteractionsHelps specify what users see while a save or update is still pending.

Limits to Check

Not a Latency FixA loading pattern changes the waiting experience, not the underlying server or network performance.
Not Success ConfirmationCompletion feedback is a related but separate interaction decision.

Bring These Inputs

Delayed OperationsList fetches, uploads, saves, and expected wait ranges.
Available Progress DataExplain which operations expose real completion percentages.
Failure and Recovery RulesSpecify cancellation, retry, and rollback options for each operation.

03 Decisions That Matter

Decisions That Matter

Pattern Matches Knowledge
A determinate bar without measurable progress communicates precision the system does not possess.
Continuity After Loading
Preserving layout and scroll position prevents a completed request from creating a new navigation problem.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Setup

Use the repository's documented installation route and retain any referenced companion files. This entry describes a focused design method rather than an executable application.

Upstream Source File

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/loading-states/SKILL.md

Accurate operation timing and progress capabilities must come from the product or implementation team.

Start With One Deliverable

Adapt the scope, source material and constraints in this brief before running the skill.

Example Brief

Use loading-states for a project dashboard with an initial fetch, image thumbnails, and inline title edits. Pick a pattern for each operation, reserve the final layout, and specify failed optimistic edits, slow-network behavior, and reduced-motion alternatives. Do not invent progress percentages.

Inspect the Result

Check the actual output against these observable criteria.

Every optimistic change has a failure rollback.
Loading and loaded layouts reserve compatible space.
Long waits expose a useful next action where supported.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesign Read the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner: Owl-Listener
Repository: Owl-Listener/designer-skills
Skill File: interaction-design/skills/loading-states/SKILL.md
License: MIT
Reviewed Snapshot: 2026-10-07 · 9a6930cf84a8

Editorial Source Summary

Choose feedback for delayed operations and specify how real results replace loading or optimistic states.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

Should every request show a spinner?

No. The source distinguishes very short waits, known layouts, measurable progress, and long-running work.

When is a skeleton useful?

When the incoming content has a known structure that can be represented without suggesting the content is already available.

Does reduced motion mean a blank loading screen?

No. Informative feedback should remain; shimmer or other decorative movement can be reduced or removed.

OpenDesign

Make Room for the Next Design Iteration.

Keep your brief, source material and design work together in a local workspace. Check the skill’s own setup before adding it to your workflow.

Download OpenDesign Browse Design Skills