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

287abe4d8c0bf8eae92dd59b753f6323?s=47 Theo Pak
September 23, 2017

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

287abe4d8c0bf8eae92dd59b753f6323?s=128

Theo Pak

September 23, 2017
Tweet

Transcript

  1. 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…
  2. 4.
  3. 5.
  4. 6.
  5. 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:
  6. 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
  7. 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!
  8. 22.

    Thanks React Boston 2017 Theo Pak // @theopak // tpak@hubspot.com

    Send me your favorite example 
 of react skeleton states!