Fixing Slow Navigation in Next.js

In this lesson, we focus on improving the user experience of the Pulse Analytics app by speeding up how it feels to switch between different insights like “This Week” and “This Month”. Right now, the delay happens because we are waiting for a server component to render before the transition begins.

React Suspense and Next.js Loading help us fix this in a clean and elegant way.

Quick Visual Recap

Here's what it looks like before and after "Suspense" and "Loading"

To summarize, React Suspense and Loading are one and the same thing. They are both used to give users immediate feedback and allow components to stream in behind the scenes. This technique uses the power of server components and streaming without relying on client-side state or spinners.

Slow transitions can make your app feel broken or unresponsive. With a simple loading.tsx file, we give users immediate feedback and allow components to stream in behind the scenes. This technique uses the power of server components and streaming without relying on client-side state or spinners.

This is one of the easiest wins to improve perceived performance in modern React apps.

Let's make loading beautiful with Skeleton UI.

This works but now, let's make it beautiful with Skeleton UI.

Showing plain text like “Loading…” works, but it’s not the best user experience. A more modern, polished approach is to show a Skeleton UI—a lightweight placeholder that mimics the layout of the final content.

Resources

• React Suspense
• Next.js Loading UI and Streaming
• Copy Paste Code with Github Commit for this lesson