Help with @slots and app router
Unanswered
Channel catfish posted this in #help-forum
Channel catfishOP
Hi All, I'm looking for advise/recommendations on how to correctly achieve a sidebar + main area layout with loading.tsx skeletons, currently I have the following, but it's not without issues.
1. The main issue is that navigating from /chat/<id> to /chat (and vice versa) triggers a full page load and the state of the @chatlist is reset (scroll position and some zustand store entries go missing). My understanding is that the /chat/@chatlist slot, should be shared between the two sub paths that the @main slot contains.
2. The @main/(main) and @main/(chatid) groups seem to be required or we see a flash of the @main/loading.tsx, then the @main/[chatId]/loading.tsx before the @main/[chatId]/page.tsx is loaded - very annoying.
3. The @chatlist/loading.tsx is never shown, perhaps because all the work is done by the layout.tsx and not a page.tsx?
4. The @chatlist/layout.tsx loads db entries server side and passes to the client side, I want this to not be re-rendered between page transitions, so this doesn't make sense to place in page.tsx?
And of course these issues only appear during production builds, dev mode runs fine..
Does anyone have any advise or examples I could look at, to correctly do something like this?
If I haven't explained something clearly enough, let me go and I'll try and fill you in!
1. The main issue is that navigating from /chat/<id> to /chat (and vice versa) triggers a full page load and the state of the @chatlist is reset (scroll position and some zustand store entries go missing). My understanding is that the /chat/@chatlist slot, should be shared between the two sub paths that the @main slot contains.
2. The @main/(main) and @main/(chatid) groups seem to be required or we see a flash of the @main/loading.tsx, then the @main/[chatId]/loading.tsx before the @main/[chatId]/page.tsx is loaded - very annoying.
3. The @chatlist/loading.tsx is never shown, perhaps because all the work is done by the layout.tsx and not a page.tsx?
4. The @chatlist/layout.tsx loads db entries server side and passes to the client side, I want this to not be re-rendered between page transitions, so this doesn't make sense to place in page.tsx?
And of course these issues only appear during production builds, dev mode runs fine..
Does anyone have any advise or examples I could look at, to correctly do something like this?
If I haven't explained something clearly enough, let me go and I'll try and fill you in!
2 Replies
Channel catfishOP
Continued, here due to message size limitations..
app/(root)/layout.tsx - top level <html...>
app/(root)/(chat)/chat/layout.tsx - shared layout with a @chatlist and @main slot
app/(root)/(chat)/chat/@main/(chatid)/[chatId]/page.tsx - loads specific chat from db and passes to client components.
app/(root)/(chat)/chat/@main/(chatid)/[chatId]/error.tsx - shown for completeness
app/(root)/(chat)/chat/@main/(chatid)/[chatId]/loading.tsx - displayed while loading - all good here!
app/(root)/(chat)/chat/@main/(main)/page.tsx - contains client components.
app/(root)/(chat)/chat/@main/(main)/loading.tsx - displayed while loading - all good here!
app/(root)/(chat)/chat/@chatlist/layout.tsx - loads chatlist from db, passes to client components, which shove data into a zustand store, shared by client components under the @main slot, works mostly as expected
app/(root)/(chat)/chat/@chatlist/page.tsx - empty, returns null
app/(root)/(chat)/chat/@chatlist/loading.tsx - skeleton - never shown...
app/(root)/(chat)/chat/@chatlist/[chatId]/page.tsx - empty, returns nullChannel catfishOP
Even if we completely remove the @chatlist slot, and move the logic back into the chat/layout.tsx we see issues with navigation where paths like /chat/<id> load the /chat page instead, something weird is going on