How to handle loading states in layout.tsx?
Unanswered
Cairn Terrier posted this in #help-forum
Cairn TerrierOP
I have dynamic pages
items/[item] and I have more subpages such as items/[items]/about and items/[items]/more. So in items/[item] I have a layout.tsx file that has a header with the item name etc. Because I am fetching data in the layout file, I want to show a loading skeleton similar to how we normally do with loading.tsx for a page. How should I go about this? Should I use a parallel route or do something else for better performance?3 Replies
Cairn TerrierOP
Also side question, when using parallel routes, do I have to have a
@parallel/page.tsx file or can I just have a @parallel/default.tsx file?@Cairn Terrier I have dynamic pages `items/[item]` and I have more subpages such as `items/[items]/about` and `items/[items]/more`. So in `items/[item]` I have a `layout.tsx` file that has a header with the item name etc. Because I am fetching data in the layout file, I want to show a loading skeleton similar to how we normally do with `loading.tsx` for a page. How should I go about this? Should I use a parallel route or do something else for better performance?
Cairn TerrierOP
after trying to do this with parallel routes instead of a layout, it appears that I have the same issue
@Cairn Terrier I have dynamic pages `items/[item]` and I have more subpages such as `items/[items]/about` and `items/[items]/more`. So in `items/[item]` I have a `layout.tsx` file that has a header with the item name etc. Because I am fetching data in the layout file, I want to show a loading skeleton similar to how we normally do with `loading.tsx` for a page. How should I go about this? Should I use a parallel route or do something else for better performance?
loading.tsx is just an implicit Suspense boundary. For the loading part in layouts, you can simply make your own Suspense boundary