if i make a loading.tsx in my app directorywill that loading.tsx apply to all routes unless i have
Unanswered
Bully Kutta posted this in #help-forum
Bully KuttaOP
indeed
16 Replies
Araucanian herring
Yes, it'll be used for all other routes. Unless you create a specific
loading.tsx@Araucanian herring Yes, it'll be used for all other routes. Unless you create a specific loading.tsx component for a unique route.
Chub mackerel
what about error.tsx ? or not-found.tsx ? same thing right ? so applies to all unless i have them for that segment
Araucanian herring
Exactly
Bully KuttaOP
thank you lads
Golden northern bumble bee
This only works for me on first load, navigation wont use the parent loading
Did you run into this @Bully Kutta ? Is this expected @Araucanian herring
IIRC yes but i think there was a edge case that if your layout is loaded but the actual page content has dynamic stuff that needs further loading then the same suspense boundary won't be triggered again. In that case you'll need another loading.tsx for that page.
@Golden northern bumble bee This only works for me on first load, navigation wont use the parent loading
Araucanian herring
When navigating to a new page, the parent
If you're fetching data from an external source and using a tool like react query there'll be the "isLoading" variable returned from the hook. Hence you could use a conditional to call the
also loading happens quickly, so you might not always notice it.
loading.tsxIf you're fetching data from an external source and using a tool like react query there'll be the "isLoading" variable returned from the hook. Hence you could use a conditional to call the
loading.tsxalso loading happens quickly, so you might not always notice it.
@Araucanian herring When navigating to a new page, the parent loading.tsx component will be used if the page is still loading.
If you're fetching data from an external source and using a tool like react query there'll be the "isLoading" variable returned from the hook. Hence you could use a conditional to call the loading.tsx component.
also loading happens quickly, so you might not always notice it.
Golden northern bumble bee
Is it just the closest parent or only the immediate? I added artificial delays to test this and I did not see this behavior unless it was on initial page load
I had to add loading.tsx files everywhere I needed it
@Golden northern bumble bee Is it just the closest parent or only the immediate? I added artificial delays to test this and I did not see this behavior unless it was on initial page load
Araucanian herring
hmm, mind sharing a code snippet ?
Golden northern bumble bee
@Araucanian herring yeah sure I can get that in a minute.
If you have
/page.tsx
/loading.tsx
/test/page.tsx
/test/foo/page.tsx
The foo page will not get loading state unless its initial page load.
If you have
/page.tsx
/loading.tsx
/test/page.tsx
/test/foo/page.tsx
The foo page will not get loading state unless its initial page load.
Let me send a short video that explains it
@Araucanian herring https://m.youtube.com/watch?v=z24qIds0kIM&feature=youtu.be