I have a layout with three parallel routes (three sections on one page). One of these routes can navigate further down to settings, at which point the section on my layout should change while the others remain the same. The routes are asynchronous and require a loading animation.

My idea was to assign default.tsx to both routes that don't navigate further, as opposed to page.tsx, to prevent errors when navigating down the other route. However, when I replace page.tsx with default.tsx, the loading.tsx no longer displays.

Is there a way to achieve this using Next.js's file structure? Should I just use Suspense in default.tsx? Or am I misunderstanding parallel routing?