what do you mean with "if the user begins a route change to a server layout with a lot of fetch requests"?

you mean that the new layout needs to fetch data?

why are you fetching in a server component

this is standard practice afaik??

yes, layout/page

how are you fetching

you can directly acccess stuff from a server component

no api fetchr equests

to create loading skeletons for a page, use loading files
https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming

to create loading skeletons for a layout, use <Suspense />

i'm not sure what either of you are saying. layouts are server components by default. 👀

here's the structure i'm using currently.

layout.tsx (server component)
- fetches data and determines which view to render for the user
- imports client components to render fetched data, wrapped in suspense, with a loading skeleton fallback.

navigation.tsx (client component)
- assume i have folders a/layout.tsx, b/layout.tsx, c/[slug]/layout.tsx
- i would have links to a, b, and one of these pages may have a list of c/[slug] links. clicking these would lead to respective layouts.

do you mean i need to have another server component separate from layout.tsx as a connecting component between layout and client??

if you fetch data on the server you dont need to use loading things

cos its going to be fast

suspense is for client components that fetch data

wat

@Blanc de Hotot use a loading.tsx

its just suspense wrapping your page

so while the page does its fetching, it shows the loading.tsx file

also this is just wrong

go read that :/

why would you use a skeleton for waiting for a data that takes almost nothing to load?

it doesnt apply to streaming

its not skeleton specific

you can just make a spinner

yes

or show a text sying loading

Yea

anything works

I havent worked with data streaming

so idk how it would work in that case

its not complicated as it sounds

but for showing loading ui while awaiting data, it would make if it were something on the client that takes long because its the client

but the server has a fast connection, so it is fast

dont fetch on the client

and if you are fetching on the client, im guessing you would be doing so in a useEffect

so you can easily setup a state var to manage loading

yes

so why would you use the suspense on the server?

since on the server...you dont have a way to do loading?

yes

i mean

a server is not always fast btw

not?

like if its something very intensive, can take around 3-4s

oh

didnt know that

what could be very intensive? multime requests?

dashboards

alot of stuff can take time

ah

youre right

i was thinking of a single component

and some thimes youre going to have multiple async components

mhm

i'm not using a loading.tsx, just using a custom fallback that's a basic component. i did end up figuring this out, i needed an additional layer of the server component that i use on layout.tsx. thank you!