Rethinking loading states for the modern web

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:

• Let the user know the update is still processing
  When an app fails to notify users that it’s taking time to complete an action, users often think the app didn’t receive the request, and they try again.
• Remove necessary loading UI messages for fast network connections
  Updates that take less than a second may be able to omit loading messages as they can add unnecessary visual noise.

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!