I have a loading.tsx filer in the root app folder on my application , however, in example/details i only have page.tsx file but it is not showing whats in the loading,tsx file, why?
#loading.tsx on root folder does not effectt sub folders
tidal acorn
dawn falconBOT
Hi @tidal acorn. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
The loading.tsx file in Next.js is used to show an instant loading state from the server while the content of a route segment loads. However, the loading.tsx file needs to be at the same level as the layout file that applies to the route for it to work correctly. If you only have a page.tsx file in your example/details directory and no layout file, the loading.tsx file in the root app directory will not apply to it.
To fix this, you should create a loading.tsx file in the example/details directory. This file will be displayed until all data fetching in the route segment has finished. Here's a basic example of a loading.tsx file:
export default function Loading() {
return <p>Loading...</p>;
}
You can learn more about this in the Next.js 13's documentation (https://beta.nextjs.org/docs/routing/loading-ui).
Also, remember that the loading.tsx file is a convention for route segments (layouts and pages) and Next.js optimizes this functionality. So, it's recommended to use this convention for better performance and user experience.
For more information, you can refer to the Next.js documentation on Loading UI and Streaming (https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
tidal acorn
but in the root i both have loading.tsx and layout.tsx , so shouldnt loading,tsx file should show an instant loading state in every sub folder if i do not crreate additional loading.tsx file
@dawn falcon but in the root i both have loading.tsx and layout.tsx , so shouldnt loading,tsx file should show an instant loading state in every sub folder if i do not crreate additional loading.tsx file
dawn falconBOT
Let me check the knowledge base for you. One moment! :books:
The loading.tsx file in the root app directory will apply to routes that use the root layout.tsx file. However, if a route has its own layout.tsx file in its directory, it will need its own loading.tsx file as well.
The loading.tsx file lives at the same level as the layout file that applies to the route, and its contents will be displayed until all data fetching in the route segment has finished. This means that if a route segment (like example/details) has its own layout.tsx file, it should also have its own loading.tsx file to display a loading state. If it doesn't, the loading.tsx file from the root app directory won't apply to it.
So, if you want the loading state to be displayed for the example/details route, you should create a loading.tsx file in the example/details directory.