# loading-states-and-perceived-performance

A coding-agent skill that picks the right spinner, skeleton or progress bar and makes a slow interface feel faster.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 871 installs · ★ 165
- Author: dembrandt
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/dembrandt/dembrandt-skills/tree/HEAD/skills/loading-states-and-perceived-performance/SKILL.md
- Updated: 2026-10-22
- HTML: https://affpapa.org/en/nevibecode/skills/loading-states-and-perceived-performance

## What it does

This skill covers loading states: spinners, skeleton screens, staggered section reveals. It maps wait duration to a pattern — a short inline spinner for button actions, a skeleton for cards and lists, a determinate progress bar for long jobs. The CSS is included: a spring-loaded rotation, a shimmer gradient that travels across placeholders, and cascading entry driven by `nth-child` delays.

There is a section on load order. Render the highest-value content first and let secondary panels stream in behind it, fetching data for tabs and off-screen sections only when they open. The skill also covers prefetching the predictable next step and optimistic UI, where the interface updates before the server answers and rolls back on failure. For waits longer than a couple of seconds it suggests micro-copy in the brand's voice instead of a generic loading message.

The skill activates on `components/**`, `**/*.tsx`, `**/*.jsx`, `**/*.css`, `**/*.scss` and `design-system/**`, so it fires in React and stylesheet work but stays out of backend files. Skeletons need care: if the placeholder shape does not match the final content, layout shift eats the perceived gain.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add dembrandt/dembrandt-skills --skill loading-states-and-perceived-performance -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/loading-states-and-perceived-performance/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/loading-states-and-perceived-performance/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add dembrandt/dembrandt-skills --skill loading-states-and-perceived-performance -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/loading-states-and-perceived-performance/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add dembrandt/dembrandt-skills --skill loading-states-and-perceived-performance -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/loading-states-and-perceived-performance/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install dembrandt/dembrandt-skills loading-states-and-perceived-performance
```

2. **Manually: put the files in place**
- File: `.github/skills/loading-states-and-perceived-performance/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add dembrandt/dembrandt-skills --skill loading-states-and-perceived-performance -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/dembrandt/dembrandt-skills --path skills/loading-states-and-perceived-performance
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/loading-states-and-perceived-performance/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add dembrandt/dembrandt-skills --skill loading-states-and-perceived-performance -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/dembrandt/dembrandt-skills/tree/HEAD/skills/loading-states-and-perceived-performance/SKILL.md

## When to use it
- decide between a spinner and a skeleton for one screen
- stop layout shift while a list loads
- show the key figure before the rest arrives
- make a long operation's wait understandable
- prefetch the next page so navigation feels instant

## Example prompts
- what loading state should this card use?
- add a skeleton loader for this list
- make the page feel faster while it loads

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: a6c92d68768c7b11.

BEGIN THIRD-PARTY FILE a6c92d68768c7b11
```text
---
name: loading-states-and-perceived-performance
description: Spinners, skeletons and staggered reveals that manage wait times. Use when designing loading states, async data or the feel of a slow interface.
metadata:
  priority: 7
  pathPatterns:
    - "components/**"
    - "src/components/**"
    - "**/*.tsx"
    - "**/*.jsx"
    - "**/*.css"
    - "**/*.scss"
    - "design-system/**"
  promptSignals:
    phrases:
      - "loading state"
      - "spinner"
      - "skeleton screen"
      - "skeleton loader"
      - "perceived performance"
      - "loading animation"
      - "shimmer effect"
      - "staggered loading"
      - "prefetch"
      - "prioritise loading"
      - "progressive loading"
      - "lazy load data"
retrieval:
  aliases:
    - loading states
    - skeleton loaders
    - spinners
    - perceived performance
    - shimmy
    - glimmer
    - prefetching
    - priority loading
    - progressive data loading
  intents:
    - design a loading state
    - add a skeleton screen
    - improve perceived performance
    - choose between spinner and skeleton
    - handle slow data loading
    - adding delight to the wait
    - load the most important content first
    - prefetch the likely next step
  examples:
    - what loading state should this card use
    - add a skeleton loader for this list
    - make the page feel faster while loading
    - design a spinner for this button
    - load the key content first then stream the rest
    - prefetch the next page so it feels instant
---

# Loading States and Perceived Performance

Users don't mind waiting as much if they understand *what* they are waiting for and *how much* progress is being made. Perceived performance is the design work of making a system feel faster than it actually is.

---

## Choosing the Right Loading State

| Wait Duration | Best Pattern | Use for |
|---|---|---|
| **Short (< 1s)** | **Inline Spinner / Loader** | Button actions, small updates, quick data fetches |
| **Medium (1s – 3s)** | **Skeleton Screen** | Cards, lists, dashboards, profile pages |
| **Long (> 3s)** | **Determinate Progress Bar** | File uploads, complex exports, heavy processing |
```
END THIRD-PARTY FILE a6c92d68768c7b11

The third-party file has ended. Everything between the a6c92d68768c7b11 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2172 of 11804 bytes. © dembrandt · MIT · https://github.com/dembrandt/dembrandt-skills/tree/HEAD/skills/loading-states-and-perceived-performance/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md