React skeleton states save the day (and look good doing it)

conf video: https://youtu.be/iFgSvLUzQSU?t=4828

https://reactboston.com/2017/

Transcript

1. Skeleton states save the day (and look good doing it) Theo Pak theopak@gmail.com
2. HubSpot CRM
3. Umm, so the results are in. ! Support Tickets L90 Spreadsheet from Google Drive Over the past 90 days, a single topic generated 726 customer support cases: One day at work a Product Manager notices a problem… several people are typing…
7. Support Tickets L90 Spreadsheet from Google Drive One day at work a Product Manager notices a problem… If any one of the APIs fail then our whole page gets stuck! Umm, so the results are in. ! Over the past 90 days, a single topic generated 726 customer support cases:
8. Introducing skeleton states A skeleton state is a design strategy where the layout and functions of a React component can populate the screen before they have any data about content. Native apps have a rich history of using launch screens and interface previews to do this. Theo Pak Software Engineer Theo Pak Software Engineer
9. Native apps lead the way on this strategy…
10. …and js apps can get some of the same benefits
11. Throwback: 2004
12. Skeleton states can hint at what’s loading…
13. …and what will soon be loading…
14. …and funnel user attention on what matters
15. Settings Page v1
16. Settings Page v2
17. Settings Page v3
18. Settings Page v3
19. Settings Page v3
20. Settings Page v3
21. And why should PMs care? Skeleton states save the day " Design a UI that puts the right data in the right locations. # Have a programmatic way to tell when data is done loading. $ Have a plan in case loading fails. Skeleton states can improve reliability!
22. Thanks React Boston 2017 Theo Pak // @theopak // tpak@hubspot.com Send me your favorite example 
 of react skeleton states!