Why loading is being triggered on the page I navigate from?

Question

I'm using Next.js 13 for my web application, which has app routing. The problem I'm facing is that when I navigate from the /projects page to the /projects/:id/edit page, it first triggers a loading event for the /projects page and then for the /projects/:id/edit page. However, I want to fix this so that only the loading event for the /projects/:id/edit page is triggered. How to achieve it?

Here's the folder structure of my project:

- projects
  - loading.tsx
  - page.tsx
  - [id]
    - edit
      - loading.tsx
      - page.tsx

And this is how I'm currently navigating from the /projects page to the /projects/:id/edit page:

<Link href={`projects/${project.id}/edit`}>
  <Button type="button">Edit</Button>
</Link>

Answer 1

one way to achieve this is to change the root, so that both components dont share it:

- projects
  - (notshared) <- name your directory with ( )
     - loading.tsx
     - page.tsx
  - [id]
    - edit
      - loading.tsx
      - page.tsx

more informations can be found on the offical page: https://nextjs.org/docs/app/building-your-application/routing/route-groups