Building UI Skeletons Just Got 10x easier

By Tobi Mey

Categories: Design, Product

Summary

React's new Suspense feature makes building UI skeletons 10x easier, with a new developer tools tab that lets you instantly see and test your loading states across multiple suspense boundaries.

Key Takeaways

1. Stop using buggy skeleton generators - instead, manually create a skeleton component by copying your actual UI and removing the logic.
2. Use the new Suspense tab in React DevTools to instantly see and test your loading skeletons, without having to refresh the page.
3. Suspense lets you handle multiple loading states across your app, with the DevTools showing each suspense boundary.
4. Adjust the height and width of your skeletons to match the actual UI, preventing layout shifts when the data loads.
5. Use top-level await or the new useTransition hook to mark components as suspending, triggering the skeleton UI.
6. Leverage Suspense to create a seamless, optimistic UI experience for users, even when fetching dynamic data.

Topics

• React Suspense
• UI Skeletons
• React Developer Tools
• Optimistic UI
• Declarative Loading States

Transcript Excerpt

Last week I showed you the concept of optimistic UI. But while we can be optimistic for create, update or delete, we can for fetching dynamic data. That's why React 19 and the concept of async React brought suspense boundaries to us. If you have no idea what I'm talking about, that's totally fine. Just watch that video here. But in a nutshell, to avoid slow navigation, add suspense boundaries around the component that is doing a suspending thing to show some fallback UI while your data is loadin...