if youre going to use loading.tsx inside the route folder, does the layout file have to be a client component?

No layout file does not have to be a client component and is preferrably needs to be a server component

then how do you display the loading text in client side when youre displaying the page.tsx. in the tutorial im following, the guy has the layout file as client component and a loading.tsx file in the route directory and has a setTimeout on the loading page to create artifical delay. but if the layout is made a server component, the two seconds loading happens in the server and you dont get to see the loading text

thats the thing, loading.tsx isn't for client-side rendering loading. its only for awaiting server components or awaiting client component that use() promises

its not really a good idea to make layout file a client component since it really confuses the boundaries

"has a setTimeout on the loading page"

what?

you put setTimeout on the page.tsx NOT on the loading.tsx....

"but if the layout is made a server component, the two seconds loading happens in the server and you dont get to see the loading text"

this is what its suposed to happen. layout is still loading, it displays the loading.tsx first before it gets swapped with layout.tsx

hang in there

yes but if i make the layout component server, the loading part happens in the server and the user wont get to see the loading text or spinner

why not?

the setTimeout is in loading.tsx

i told you many times... you dont put setTimeout in loading

i have the folder strucutre like this
/layout.tsx
/subpage/loading.tsx
/subpatge/page.tsx

i know. thats for similuating load time

no, you dont simulate load time in loading.tsx

thats what im trying to say

oh ok where do i do it then

read

isnt having layout in the root folder and inside the subpage the same

its the same

if youre not going to replace the layout

but put setTimeout in page.tsx not loading.tsx

pretty please?

ok i will try doing that

thank you. i appreciate it

thanks it worked

thanks for being so patient

all good

take care you

but how though, i dont understand

its because

streaming 🌟

partial results are getting sent instantly (layout and loading) while page.tsx is still being processed

slowly once its done, it sends page.tsx to the client, and in the client, loading.tsx will be swapped with page.tsx

all in one request-response cycle, keeping the connection open the whole time

thanks a lot