Loading.tsx only shows briefly during long RSC data fetch

[frasergr]

I'm having an issue where navigating to a app dir page seems to send two requests to the server.

As an RSC, when navigating to the page, it fetches data from the server that can take some time. During that fetch time, I expect the loading.tsx to display. However, when the two requests are sent, the loading.tsx is displayed for a split second, then the page is displayed (without the data we're waiting for) and, finally, when looking at the network requests, I can see the first request finish.

In the example video, on the final page (Step 5/Article) you can see the two network requests, the blank page which appears after a moment and the time updating for the first request (after the server has finished the long fetch).

https://www.youtube.com/watch?v=2nhfllPsSUE

[devjiwonchoi]

Since a default loading.tsx appears on "loading the page contents", the fallback for data fetching needs to be configured.

With this convention, you can show an instant loading state from the server while the content of a route segment loads, the new content is automatically swapped in once rendering is complete.

In this case, you can use Suspense in order to show the fallback loader while async fetching.

works by wrapping a component that performs an asynchronous action (e.g. fetch data)...

import { Suspense } from 'react'
import { PostFeed, Weather } from './Components'
 
export default function Posts() {
  return (
    <section>
      <Suspense fallback={<p>Loading feed...</p>}>
        <PostFeed />
      </Suspense>
      <Suspense fallback={<p>Loading weather...</p>}>
        <Weather />
      </Suspense>
    </section>
  )
}

Reference

• Suspense Example
• React Suspense

[Yonisegev]

Have you managed to solve this issue?
I am facing the same, where I am using page.tsx as a server component and fetch data there.
I am using loading.tsx which does show the loader instantly upon navigation, but it disappears before the page is ready, showing my component only with a black background (my CSS style), and only briefly after that it replaces it with the content

[frasergr]

No I never figured out what to do to solve the issue and haven't had time to go back to it. I ended up doing most of the work in client components...

[devjiwonchoi]

Hey, have you tried moving loading.js to the same level as your next route? (e.g. / -> /post; loading.js on the same level as /post)

[frasergr]

I have loading.js at the same level for each route. I've moved on from this issue and not something I wish to revisit. If I encounter a need for this I'll create a min repro.

[machulav]

I have precisely the same issue as @Yonisegev described.

Interestingly, I can not reproduce it on the local machine. I've tried to use production mode and simulate the extended API response - but it didn't help to reproduce.

But I can reproduce it quite easily on Vercel. Especially if my BE on AWS Lambda is not warmed up.

Here is an example of how the loading state disappears, and there is a white screen for a few moments until the data arrives:

Screen.Recording.2024-08-10.at.00.09.54.mov

Does anyone know how to fix that?