# Loading Copy Sets an Expectation
**SHOULD** · **ID:** `content-impeccable-loading-copy-expectation` · **Category:** content
**Source:** [impeccable](https://impeccable.style/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/content-impeccable-loading-copy-expectation
> SHOULD: Name the work and its expected duration inside a loading state ("Analyzing your data… this usually takes 30–60 seconds") instead of a bare "Loading…", which says the same thing at 1s and at 90s so the user cannot tell working from hung. Show a signal that advances, and give anything past ~10s an escape hatch.
Name the work being done and how long it usually takes, instead of shipping a bare "Loading…"
The corpus already governs how a loading state looks — stable skeletons, matched dimensions, a minimum display duration — but nothing until now governed the words inside it, and the words are what carry the expectation. "Loading…" is a dead end: it says the same thing at one second and at ninety, so on a long job the user cannot distinguish "still working" from "hung", and the rational move becomes reloading the page and losing the work. Name the work ("Importing 1,240 rows"), state the expected duration ("this usually takes about a minute"), and show a signal that advances. Anything past ten seconds also needs an escape hatch, because a bounded wait the user chose to abandon is far better than an unbounded one they had to guess about.
## Bad — do not do this
`content-impeccable-loading-copy-bad`
```tsx
import { useEffect, useState } from 'react';
// The whole failure is the string. It never changes, and it never ends.
const LABEL = 'Loading…';
export function ImpeccableLoadingCopyBad() {
const [elapsed, setElapsed] = useState(0);
useEffect(() => {
const id = window.setInterval(() => {
setElapsed((s) => (s >= 90 ? 0 : s + 1));
}, 1000);
return () => window.clearInterval(id);
}, []);
const suspicious = elapsed >= 30;
return (
{LABEL}
{elapsed}s elapsed
No named work. No expected duration. No cancel. The copy says exactly the
same thing at 1s and at 90s.
{suspicious
? `${elapsed}s in — is it working, or is it hung? The copy cannot tell you, so the user reloads and loses the job.`
: 'Watch the counter: past ~30s the user has no way to tell "still working" from "stuck".'}
);
}
```
## Good — do this
`content-impeccable-loading-copy-good`
```tsx
import { useEffect, useState } from 'react';
const TOTAL_ROWS = 1240;
const EXPECTED = 'this usually takes about a minute';
export function ImpeccableLoadingCopyGood() {
const [rows, setRows] = useState(0);
const [cancelled, setCancelled] = useState(false);
useEffect(() => {
if (cancelled) return;
const id = window.setInterval(() => {
setRows((r) => (r >= TOTAL_ROWS ? 0 : Math.min(TOTAL_ROWS, r + 40)));
}, 500);
return () => window.clearInterval(id);
}, [cancelled]);
const percent = Math.round((rows / TOTAL_ROWS) * 100);
if (cancelled) {
return (
Import cancelled
{rows.toLocaleString()} of {TOTAL_ROWS.toLocaleString()} rows were
imported. Nothing else changed.
The escape hatch is real, and it says what it left behind.
The copy names the work (“Importing 1,240 rows”), sets the expectation
(“about a minute”), and proves it is alive via the row count — so a slow
job never reads as a hang.
);
}
```
## References
- [impeccable — clarify](https://impeccable.style/)
- [NN/g: Progress Indicators](https://www.nngroup.com/articles/progress-indicators/)
- [NN/g: Response Times — The 3 Important Limits](https://www.nngroup.com/articles/response-times-3-important-limits/)