How to handle slow data

[jontas]

Hey, hopefully someone can help me figure out the right pattern to use for something like this:

https://codesandbox.io/s/confident-morse-ggmbi?file=/app/pages/index.tsx

This page has SSR props that take a long time to return. When navigating to the slow page (eg from index) the data is fetched via xhr but I want to show a loading state. I tried wrapping the whole thing in <Suspense> via the layout since I know that mutations have built in Suspense support but it doesn't look like the SSR props handle this.

Is there a better pattern for handling this loading state?

Thanks!

[flybayer]

Here's two examples with different ways to solve this:

• https://github.com/vercel/next.js/tree/canary/examples/with-loading
• https://github.com/vercel/next.js/tree/canary/examples/with-next-page-transitions

[jontas]

Ahh, thank you! I didn't realize this was a nextjs specific thing, will look at their docs.