Could it be because we navigated from the parent segment to this segment, so it still uses the loading.tsx that wrapped the previous page and only updates the page, not wiping out the suspense boundary? I have no other guess

And it seems to happen when I go backwards so this is probably not right

There is no loading.tsx file in modding segment

Is this correct?

im not sure if i understand your question, but yes loading.tsx wraps all child (loading and page, +the children) in its suspense boundary thus meaning you see it.

if you dont want the loading, then you can use route groups for that one page (or do do suspense boundary yourself)

On full page reload the nearest loading file will be used, but in page navigation it won’t follow this. My question is mainly asking where a loading.tsx file is applied and when will it show its loading state.

A loading.tsx applies to all sibling and children page.tsx files

Have you tested this @Maheśvara ? On navigation and page reload?

well think of loading as fancy layout with suspense wrapping children

Not your exact code, but I have similar stuff in my prod code base.
Also, based on your pic, your loading.tsx seems to be inside the [id] dir.

So when you had said

Why is the loading.tsx for the guns segment being used in the id segment?

It should be because the loading.tsx isn't set for the guns segment, but the id segment

Right, it’s just a fancy way of doing it that next came up with, but it’s a bit confusing WHEN it does this wrapping. Someone made a video describing why he was confused that explains it perfectly, maybe I can find it

Tbh, I think it's pretty straightforward once you understand the tree. Next also has pictures showing how the tree looks, so it's pretty easy imo. Using Suspense directly is more of a pain imo, so I prefer this approach.

If you get a minute ^

Also, suspense doesn't always take place as you might expect, however that's not a matter of Next, but just Suspense itself. Like if you use revalidatePath/Tag on something that has Suspense, you'll only see the Suspense on the first load, not the subsequent ones.

Although you can actually tweak it to make it always suspend if you want

oh i dont like that - i mean i didnt consider it, but at same time it makes sense as the suspense element needs to be remounted to be used again (idk how one would do that here tho)

I’ve just realized my screenshot is wrong and that loading.tsx doesn’t exist. The one I wanted to send was the loading tsx on the gun segment. Good catch my bad I think I lined it up wrong

i guess best solution is to just make many loading and link back to the one you like export {default as default} from "../loading" :)

Tbh, I have a codebase which reuses a loading.tsx and it works as I expect and not like that. I wonder if it's a bug?

Also, as of recently, root level loading.tsx was causing me a bug, and I had to move it down

This is how it’s always behaved for me and every thread I open about it it never seems to have a straightforward answer 🤷‍♂️

I’m just so confused by it 😂

Yep this is how I handle it now, put loading files everywhere

Even tho they are all the same, someone said they changed this behavior and it USED to be how you guys are describing it. But I’m not honestly sure

btw if you make layout and do suspense yourself, does it work as intended?

like maybe nextjs is being too funny with their optimised version

here's an example that works for me rn, excuse the inconsistent naming schemes:

Need to try that again - didn’t get a solid answer last time

True maybe

fwiw i personally try to make skeleton for all my pages, which means i cant rely on just one spinner

I kinda end up with something similar since i use parallel routes

So each parallel route ends up with it's own loader

But in this example, I'm using one loader for the entire path, and when it loads the main stuff, it then suspends the loader from the parallel routes

I dislike manual suspense, it feels too wordy I guess

I prefer the approach of just having stuff split up in their own dedicated files

Could this be something to do with the suspense being recreated - I need to remind myself how parallel routes are working

I’m gonna have to do even more testing on this I think

I still do it in certain places, but I opt for parallel routes if I can

parrallel routes major feature to me is being able to get more context but still inside "layout" (ie search params) and also getting error boundaries... the loading i just a nice bonus because it does force you to split things up

Yeah, I use it mainly for ensuring data consistency and accessing server-side data.

Once you get accustomed to it, although it adds more files to your repo, it simplifies the logic imo

There are still a lot of issues with it and I still believe it shouldn't be marked as stable, but that's another topic altogether

WAIT WHAT

I have a bunch of modals that use that shit

it seems to like just load the page for me

maybe its fixed as i tested like 3 weeks ago tho

Could just be a bug then, both intercepting and parallel routes are highly unstables

well yeah i hope it is

There were releases in v13 that straight up broke it for me before

And I needed to wait for months before it worked

ikr

you should try canary as the notable things are diferent defaults of caching
(and my least fav auto resetting for using action={} in <form>)

I don't using action in forms, I use react hook form so I manually call the actions. I just dislike the current way to handle error states.

fair your fine then (i just liked the feature where you could use form without js)

I'm of the opinion that Error states should be handled using the native error API aka throw new Error and not this shit with wrapping a custom JSON object

yes and no, the amount of server lib errors that include sensitive info is too huge and the average user wont know

{
  status: 200,
  message: "error"
}

Is the most stupid thing

i just have toast and {message: "yay"} or {error: "u bad"} 🤣

Nah, I think when an error happens, you should just throw throw new Error("incorrect creds")

Don't throw the stuff directly from the lib

It's a built-in API, it's easy to do and it also ensures your function has a singular return type/format

yooo they fixed it

Noice, I'm waiting until it hits stable before I look into adapting it. I expect I might need to cleanup some useMemos I have around the code base

Nah, I'm staying away from that shit lmao

note that react compiler isnt default enabled, just offered

I know, but that's what I want to use if upgraded

i hope libs have supported it better as on day 1 it was so breaking things

Well, we'll see, I expect them to launch v15 soonish

Although knowing them, it'll be undercooked and require a few more months in the oven

That's what's happened for both v13 and v14. v14 was at least a bit better as it was more of a stability update. I personally think that v14 is what v13 should've been.

anyway nice talking, what even was going on with original issue

loading being weird and only wanting to be used once

even tho suspense should be able to be invoked multiple times

Idk lol. Personally I think it might be an issue with the suspense not re-suspending due to the same promise being used multiple times.

Like when you use a Suspense, the Suspense has a key value as a prop (not sure if the same key or different one) and this key is what you use to force it to re-suspend. I think the problem is that the loading.tsx isn't re-suspending because it's detecting it's the same request from before. A manual suspense would probably work better as you can tweak if it should suspend again or not and not rely on the defaults of Nextjs

yeah key={usePathname()} :)

oooh, 14.2.10 release. Noice, I like these bug fix releases. Don't need to worry about breaking my codebase

wait local dev was never the issue... it was vercel that it doesnt work on... time to revert :(

oof

Thankfully I self-host

I wish there was a better way to self-host multiple apps on ELB, since rn I need to setup github actions for each repo and manage them individually. Wish there was an interface like Vercel/Amplify I could use to manage all of em

I'm starting to just use standalone and run in vps tho... This project that uses it was trying to test out vercel page caching tho... So I kinda want to use :)