The article "The Best Loading States Are No Loading States" explores how to effectively eliminate loading states in applications. It suggests reverting to an earlier web model where the browser handled data loading, thereby avoiding the proliferation of skeletons, spinners, and other loading UI elements common in modern Single Page Applications (SPAs).

Key Points:

• Historical Context:

  • Prior to SPAs, web pages fully loaded before displaying, handled by the browser, eliminating the need for loading states.
  • SPAs introduced immediate client-side navigation, creating a need for data-loading visuals post-navigation.

• Route Transitions:

  • Route transitions can mimic the older web model by delaying page changes until all necessary data is ready.
  • This involves starting data loading prior to navigation, using preloading strategies.

• Preloading:

  • Effectively preload data by starting data fetching when a link is hovered or enters a viewport.
  • This approach avoids scattered loading states by managing data needs at the route level.

• Feedback Loop:

  • A UI that fills in incrementally signals missing preloaded data, serving as feedback for developers to correct preloading strategies.

• Global Loading Indicators:

  • Implement a single, consistent loading indicator for unavoidable waits, similar to GitHub’s loading bar, enhancing user understanding and experience.

• Initial Page Load:

  • Use a fullscreen overlay on initial loads rather than component-level loading states to handle data fetching in one place.

• Local Data Persistence:

  • Store data locally to reduce loading states on refreshes, enabling immediate rendering from cached data.

Conclusion:

The piece advocates for shifting the handling of loading states to the application level through preloading and caching, making component-level loading states largely redundant. This method not only improves user experience by reducing wait times but also offers a clearer feedback mechanism for developers to enhance performance and data handling strategies.