Asynchronous UX

on YouTube ↗21m

" summary

Concrete UX rules and code patterns emerge: use idempotency key in localStorage to make long actions safe to retry and avoid double payments, disable buttons and show a progress state while preventing double submits, prefer skeleton loaders vs indeterminate progress only when the skeleton can reliably mirror the UI, introduce a small delay before showing spinners to avoid flicker, cancel async work with a cooperative cancellation token or mounted flag to avoid setState after unmount, and treat optimistic updates as requiring rollback strategies or CRDTs for correctness.

AI-written summary · about

" chapters (13)

1. 0:00Introduction
2. 1:16Queries
3. 4:13Progress Indicator
4. 5:58Empty States
5. 8:17Side Effects
6. 14:40Field Validation
7. 15:15Blocking Nonblocking Actions
8. 15:41Double Submissions
9. 16:11Network Issues
10. 17:18Mounting
11. 18:52Race Conditions
12. 19:49Recap
13. 20:11Outro

" related talks

• 48mUX Programming for DevelopersYun Jisu · FEConf 2018 Korea
• 40mCreating Fast-Feeling Web AppsTrung Vo · Øredev 2025
• 18mThe need for speed - Single-page apps, Optimistic UIs, ReactivityGuillermo Rauch · dotJS 2013
• 27mDon't block the event loop!JavaScript Async for Effortless UXJaeseok Kang · JSConf Korea 2019
• 26mThe Virtue of Laziness: Leveraging Incrementality for Faster Web UIJustin Fagnani · Chrome Dev Summit 2018
• 09mRoad to a Better UX with Suspense and Concurrent UINikhil Sharma · React Summit Remote Edition 2021
• 22mRoad to a better UX with Suspense and Concurrent UINikhil Sharma · React Conference Live 2022
• 54mHow to build the modern, optimistic and reactive user interface, we all want.Guillermo Rauch · ColdFront 2014