1 reply

Prefetching deeply nested loading.tsx doesn't work on NextJS 14

I have been banging my head around this for 3 days but i just don't understand why this is happening. Here's the issue:

app/route-1/loading.tsx

app/route-1/loading.tsx

<--- This is prefetched when you open

example.com/

example.com/

app/route-2/nested/loading.tsx

app/route-2/nested/loading.tsx

<--- This isn't prefetched when opening

example.com/

example.com/

app/route-3/(nested)/loading.tsx

app/route-3/(nested)/loading.tsx

<--- This also isn't prefetched when opening

example.com/

example.com/

I don't understand why this is happening or how i can force all

loading.tsx

loading.tsx

to be prefetched.

Here's a sandbox i have created to showcase this:
https://codesandbox.io/p/devbox/loading-prefetch-8tc8hz

And here's the actual code where i am experiencing this:
https://github.com/LoV432/ArchiveScape/blob/master/app/users/(users)/loading.tsx

I would really appreciate any and all kind of help