I want to implement loading ui in my app by adding loading.tsx
files to route segments:
File system.
But the problem is that when I add the loading.tsx
file to the /jobs
and /jobs/[id]
route segments and navigate to the /jobs/[id]
route from the /jobs
route, I get almost infinite page loading.
I tried to find out the reason of such behavior and I saw in the network tab of the browser console a large number of identical requests from the client to the server:
Network tab.
When I remove the loading.tsx file everything is fine. The client makes only one-two requests to the server and the page loads. Why is this happening and how can I solve this issue?
Here is a code of the /jobs/[id]
route:
export async function generateStaticParams() {
const allJobs = await prisma.job.findMany({ select: { id: true } });
return allJobs.map(({ id }) => ({ id }));
}
interface Props {
params: { id: string };
}
export async function generateMetadata({ params: { id } }: Props): Promise<Metadata> {
const job = await cachedFetchJobById(id);
if (!job) {
notFound();
}
return {
title: job.title,
};
}
export default async function Page({ params: { id } }: Props) {
const job = await cachedFetchJobById(id);
if (!job) {
notFound();
}
return (
<main className='main'>
<Breadcrumbs items={[{ label: 'jobs', href: '/jobs' }, { label: job.title }]} />
<JobDetails {...job} />
</main>
);
}
3