AppRouter: loading.tsx … multiple variants possible?
Answered
Acorn Woodpecker posted this in #help-forum
Acorn WoodpeckerOP
Hey people, the subject of my post says it all. But, to get a better understanding:
I just want to be able use different styles Loading componetsvariants within my suspense fallback.
I have tested this quite extensively and the only working solution is with the loading.js or .tsx file as the documentation describes:
export default function Loading() {
// You can add any UI inside Loading, including a Skeleton.
return <LoadingSkeleton />
}
This returns always the same skeleton , no matter if the loaded content is a simple blog page or a product listing page.
Thanks a lot in advance!!
I just want to be able use different styles Loading componetsvariants within my suspense fallback.
I have tested this quite extensively and the only working solution is with the loading.js or .tsx file as the documentation describes:
export default function Loading() {
// You can add any UI inside Loading, including a Skeleton.
return <LoadingSkeleton />
}
This returns always the same skeleton , no matter if the loaded content is a simple blog page or a product listing page.
Thanks a lot in advance!!
Answered by Northern Wheatear
for example:
function LoadingPg(){
const path = usePathName()
if(path.startsWith('/blog'))
return <div>Blog loading</div>
if(path.startsWith('/account'))
return <div>Account loading</div>
// general case
return <div>Loading</div>
}27 Replies
@Acorn Woodpecker Hey people, the subject of my post says it all. But, to get a better understanding:
I just want to be able use different styles Loading componetsvariants within my suspense fallback.
I have tested this quite extensively and the only working solution is with the loading.js or .tsx file as the documentation describes:
export default function Loading() {
// You can add any UI inside Loading, including a Skeleton.
return <LoadingSkeleton />
}
This returns always the same skeleton , no matter if the loaded content is a simple blog page or a product listing page.
Thanks a lot in advance!!
you should be able to use fallback in suspense.... can you show your code as you need to do the async fetching inside a component in the suspense and not in the og component
Acorn WoodpeckerOP
Hey @riský thanks for your response!
In my layout.tsx:
export default async function IndexRoute({
children,
}: {
children: React.ReactNode
}) {
return (
#Unknown Channel
<div className="flex flex-col min-h-screen">
<Suspense>
<Navbar />
</Suspense>
<div className="flex-grow px-4 mt-20 md:px-16 lg:px-32">
<Suspense>{children}</Suspense>
</div>
<Suspense>
<Footer />
</Suspense>
</div>
{draftMode().isEnabled && <VisualEditing />}
</>
)
}
The Boundariy should not be the problem, as it works as soon as I add a loading.tsx file at the level.
But it does not work when just using a custom fallback, without the loading.tsx.:
<Suspense fallback={ <Skeleton/> }>{children}</Suspense>
In my layout.tsx:
export default async function IndexRoute({
children,
}: {
children: React.ReactNode
}) {
return (
#Unknown Channel
<div className="flex flex-col min-h-screen">
<Suspense>
<Navbar />
</Suspense>
<div className="flex-grow px-4 mt-20 md:px-16 lg:px-32">
<Suspense>{children}</Suspense>
</div>
<Suspense>
<Footer />
</Suspense>
</div>
{draftMode().isEnabled && <VisualEditing />}
</>
)
}
The Boundariy should not be the problem, as it works as soon as I add a loading.tsx file at the level.
But it does not work when just using a custom fallback, without the loading.tsx.:
<Suspense fallback={ <Skeleton/> }>{children}</Suspense>
hmm i don't know if you can suspense children
i think loading.tsx is the indented way because it is layout and dealing with children
maybe the actual page needs loading file to work better (or make that have the suspense)
Northern Wheatear
If you are routing to a blog page you can specify another loading.tsx file inside its folder right?
Example :
Example :
-app
|
---blog
|
------loading.tsx
------page.tsx
---global.css
---loading.tsx
---page.tsxI'm bad at creating this folder representation but I hope you get the point😅
Acorn WoodpeckerOP
Hey hey, appreciate all your feedback. I tested the approach with another loading.tsx within a route. Surely this approach works fine. But if the layout of the blog page varies, I simply want another loading skeleton.
I even tested multiple Variants or named exports from the loading.tsx to return variations of <LoadingSkeleton /> but could none of trhe solutions worked
export default function Loading() {
// You can add any UI inside Loading, including a Skeleton.
return <LoadingSkeleton />
}
I even tested multiple Variants or named exports from the loading.tsx to return variations of <LoadingSkeleton /> but could none of trhe solutions worked
export default function Loading() {
// You can add any UI inside Loading, including a Skeleton.
return <LoadingSkeleton />
}
Northern Wheatear
I didn't actually understand what u mean. On what factor does the layout of the blog page vary?
Acorn WoodpeckerOP
Well, sorry for missundertanding. Assume my structure is:
As you can see, I don’t have a blog but a dynamic slug, So the page inside [slug] differs in visual styling based on which data has been passed from the CMS (Sanity). So it would be great to have loading skeletons for each visual different layout types.
-app
|
**---[slug]**
|
------loading.tsx
------page.tsx
---global.css
---loading.tsx
---page.tsxAs you can see, I don’t have a blog but a dynamic slug, So the page inside [slug] differs in visual styling based on which data has been passed from the CMS (Sanity). So it would be great to have loading skeletons for each visual different layout types.
Northern Wheatear
Oo now I get it
Actually you can use usePathName hook to get the current route of the page and then conditionally return jsx for loading right?
Northern Wheatear
for example:
function LoadingPg(){
const path = usePathName()
if(path.startsWith('/blog'))
return <div>Blog loading</div>
if(path.startsWith('/account'))
return <div>Account loading</div>
// general case
return <div>Loading</div>
}Answer
Northern Wheatear
I guess this is what u meant
This code goes into the loading.tsx file of [slug]
For this to work it should also be a client component I think
Acorn WoodpeckerOP
Sounds like a great solution. Will test it out and leave feedback asap. Thanks a lot!!!!!
Northern Wheatear
Sure do test it out... I never had the chance to try this in such a situation😅
Acorn WoodpeckerOP
You’re genius @Northern Wheatear works like a breeze! Thank you!
Northern Wheatear
Lol thanks😅
Acorn WoodpeckerOP
😉
Northern Wheatear
Can you mark this as answered with the solution?
oh tht did not work right? 😄
Northern Wheatear
Mm... Not like this
Right click on the solution -> apps -> mark solution
Right click on the solution -> apps -> mark solution
Acorn WoodpeckerOP
Thanks a lot!!! @Northern Wheatear
Northern Wheatear
Happy to help ðŸ¤