# Prefer Skeletons Over Spinners
**SHOULD** · **ID:** `interactions-ibelick-loading-skeletons` · **Category:** interactions
**Source:** [@Ibelick](https://www.ui-skills.com/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/interactions-ibelick-loading-skeletons
> SHOULD: Use structural skeletons for loading states instead of spinners. Skeletons show content shape, reduce perceived wait time, and prevent layout shift.
Use skeleton placeholders instead of spinners for loading states to reduce perceived load time
The load-bearing word upstream is *structural*: a skeleton earns its keep by mirroring the shape of the content that is about to arrive, which reserves the layout and cuts perceived wait. A generic shimmering block is just a spinner with extra steps. This is a SHOULD, not a MUST — a spinner is still fine for a short, unpredictable wait with no known shape.
## Bad — do not do this
`interactions-ibelick-loading-skeletons-bad`
```tsx
import { useState, useEffect } from 'react';
export function IbelickLoadingSkeletonsBad() {
const [loading, setLoading] = useState(true);
useEffect(() => {
const timer = setTimeout(() => setLoading(false), 2000);
return () => clearTimeout(timer);
}, []);
if (loading) {
return (
Spinner gives no indication of what's loading or how long it will take
);
}
return (
John Doe
Software Engineer
Content loaded
);
}
```
## Good — do this
`interactions-ibelick-loading-skeletons-good`
```tsx
import { useState, useEffect } from 'react';
export function IbelickLoadingSkeletonsGood() {
const [loading, setLoading] = useState(true);
useEffect(() => {
const timer = setTimeout(() => setLoading(false), 2000);
return () => clearTimeout(timer);
}, []);
if (loading) {
return (
Skeleton shows content structure - reduces perceived load time