Angular — Managing UI State with async data

A comprehensive guide for loaders, errors, and empty states

Fer Ayguavives
Webtips

--

Angular — Managing UI State with async data

How do you handle user waitings? What happens when some page content fails loading?
We will review some basics from Material Design guidelines and expand the last article about Atomic Design. Take a coffee, and feel free to join!

The principles

Great designs go beyond colors, shapes, and happy paths. They handle server errors, empty states, and asynchronous content with elegance.

Even the bad scenarios are integrated as part of the show to keep the user engaged.

Material Design offers a comprehensive guide to the underlying principles of a good UI. Beyond implementation details, we can simplify the theory in two core goals for enhancing the user experience:

  • Reduce user uncertainty
  • Provide visual feedback of progress.

The basic UI States of a component

--

--

Fer Ayguavives
Webtips

Coffee lover. Psychologist. Nerdy Front-End Developer since the 56-Kbps days. Javascript & Angular enthusiast. | Writer at Angular Playground