NextJS loading.tsx file only works for one route, not subsequent routes

I want all my page transitions to fall back to one loading.tsx very high in my directory tree. Here’s how my NextJS v14.2 project is set up:

app/
├─ loading.tsx
├─ page.tsx
├─ child/
│  ├─ page.tsx
│  ├─ grandchild/
│  │  ├─ page.tsx
│  │  ├─ greatgrandchild/
│  │  │  ├─ page.tsx

What happens is the loading file can be only used one time, and it doesn’t show the loading indicator on future page navigations.

• Here’s a demo video (3 minutes)
• Demo Repo on Github

My current solution is to put lots of loading.tsx files all throughout my app, but I’m Type A and I don’t like all the clutter of doing this….

Can NextJS always fallback to a high-level loading.tsx file?