It is easy to overlook load states, but I think they are a critical part of building a user friendly application. Frontend Developers are in the business of trust; we must build interfaces that portray the brand, are fully functional, and leave the users feeling assured and never confused. This is no small feat! Load states are a powerful and often under utilized tool in the frontend arsenal and I'd like to take a moment to dive deep on them.
Inevitable, your page will need to load. The frontend will fetch information from the backend, and there will be at least a moment where the status of the page is pending those results. This can happen when you first arrive on the page, when the user takes an action, or when data already presented has gone stale. This will trigger a load state.
When the page is loading, the user is waiting. According to the Doherty Threshold the goal of the load should be under 400ms so that the user can remain engaged in their thought. If a page has a long load, the first line of defense is to optimize the backend to decrease the load time. This is sometimes impractical or impossible, so instead we can supplement this with a good load state.
I want to preference this and acknowledge that load states aren't free. They have a cost associated with them, but I believe investing in load states contributes to the overall look and feel of the application and there is a reasonable way to implement them that is totally worth it. Let's get into some techniques I've implemented at my current shop that have helped our load states:
Use your best judgement when it comes to creating good load states and put in the extra effort. We've found being conscious about our load states have made a big improvement to the brand and our user's trust.