01The idea
Every team says speed matters, and every roadmap pushes it to next quarter. We built a small tool to make the cost of latency something you can feel in a meeting, not a number on a dashboard.
It wraps the same button and list in different response times, from instant to painfully slow, and lets you switch between them with one slider. Ten seconds of clicking does more than a page of charts.
02Try it
Drag the slider, then press the buttons. Try the same delay with both strategies and notice which one feels faster.
03How it's built
Each demo component calls a fake endpoint that waits for the delay you pick. Optimistic updates, skeletons and spinners can be switched on and off, so you can compare honest loading states with pretend-instant ones.
- One slider sets the delay for every component on the page
- Optimistic, skeleton and spinner modes side by side
- Runs at the edge, so the delay is the only variable
- Shareable links that keep your settings
1// wait as long as the slider says, then answer2export async function fakeFetch<T>(data: T, ms: number) {3 await new Promise((r) => setTimeout(r, ms))4 return data5}67// optimistic: show the result now, settle later8async function like(id: string) {9 setLiked(id, true) // instant feedback10 try { await fakeFetch(id, delay) }11 catch { setLiked(id, false) } // roll back on error12}04What we learned
Under about 100ms people call it instant. Around 300ms they notice. Past a second they start to doubt the product. Optimistic updates buy back most of that doubt, as long as they can roll back honestly.
- Feedback in the first 100ms matters more than total time
- Skeletons beat spinners for anything over half a second
- Optimistic UI needs an honest rollback
The quickest way to win a performance budget is to let the room press the button at 800ms.
