Using the same Loading UI for nested pages (optimal use)

Question

In Next App router, I'll be using the same <LoadingPage /> component for each loading file on several pages. I don't think you can nest it through to other pages in the same way that you do with layout.tsx. Is there any way to optimize this process rather than putting in several loading.tsx files that are exactly the same in each page folder?

gpt-help said there isn't a way, but figured I'd see if anyone has come across any creative optimizations for this

American Crow · Answer

I thought Loading.tsx is just an upper boundary and children fall back to it (if they do not have an own Loading.tsx). Did you test it?
If that is not the case:
Pretty sure loading.ts does nothing else than wrapping your page and children in a React.Suspense

You can always manually do it:

      <Suspense fallback={<MyLoadingSekelton>}>
        <PostFeed />
      </Suspense>

and reuse the Sekelton like that ofc

Using the same Loading UI for nested pages (optimal use)

2 Replies