Rethinking loading states for the modern web

Simon Schwartz
Apr 8, 2019 · 3 min read
Windows XP loading screen

This blog is about 2 simple guidelines you can use to improve the user experience of loading states in your apps. It includes demonstrations of how you might implement them in a frontend application with JavaScript.

For the demos, I am using request-state-wrapper, a small tool I built for easily managing stalled states for requests. It can be used anywhere JavaScript is used. The project is open sourced so feel free to use it as reference to create your own implementation if you feel the need.

1. Start to consider stalled states

Users interpret loading states as ‘there is going to be a delay’.

In todays web, more and more people are using our apps on slower connections and mobile devices. We need to make sure we focus on the user experience of users with slow network connections. This is particularly relevant as more of the developing world joins the internet.

One approach is to start thinking about stalled loading states.

An example of updating our loading UI when we detect a stalled state

Benefits

Stalled states are where the request has taken more time than our users expect for it to complete.

The benefits of using stalled loading states are that we can:

Demo

2. Batch relevant UI updates together

When many UI updates finish around the same time, it may be worth batching their UI updates together to promote a more stable UI.

Some updates require us to stitch multiple requests together to populate all the data we need. We should be batching these updates together where it makes sense. Frameworks such as React are adding features like time-slicing to make this easier.

Updates are staggered 😓
Updates are batched together 😇

Benefits

The benefits of batching UI updates are:

  • Overall more stable UI
  • Reduces visual noise of updates

Demo

Demo of batching 2 seperate requests together. The Haiku content and Haiku metadata are 2 seperate requests

Thanks for reading!

DailyJS

JavaScript news and opinion.

DailyJS

JavaScript news and opinion.

Simon Schwartz

Written by

Developer from Sydney, Australia. Aspiring to communicate complex topics in simple ways. Engineer at Australian Broadcasting Corporation.

DailyJS

JavaScript news and opinion.