Route modal - once route modal loaded , previous content getting wiped/replaced

[potent scaffold]

Goal
Trying to create a route base modal.
Currently using Remix v1 routes file system routing

Background context

1. A user is on /dci/metro/visualizer/$device_name route
2. User clicks device which adds a /detail to the existing URL
   • before clicking device: /dci/metro/visualizer/$device_name
   • after clicking device (which triggers modal route): /dci/metro/visualizer/$device_name/detail

├── dci
│  ├── metro
│  │  └── visualizer
│  │     └── ($device)
│  │        ├── detail.tsx (modal route)
│  │        └── index.tsx. (devices visualization)

Challenge / Observations:
Once the /detail route is active AKA we are now on this route /dci/metro/visualizer/$device_name/detail,
The modal appears for brief half-second
Previous content gets wiped completely
Modal doesnt show

Question:
How do I get my route modal to appear directly over the previous content I had?

• Before modal route is active, the route is: /dci/metro/visualizer/$device_name
• After modal route is active, the route is: /dci/metro/visualizer/$device_name/detail

Github Discussion
https://github.com/remix-run/remix/discussions/7618

Route modal - once route modal loaded , previous content getting wiped/replaced

[potent scaffold]

Ran npx remix routes and got this:

Ran npx remix routes and got this:

<Routes>
  <Route file="root.tsx">
    <Route path="dci/metro/visualizer/:device?/detail" index file="routes/dci/metro/visualizer/($device)/detail/index.tsx" />
    <Route path="dci/metro/visualizer/:device?" index file="routes/dci/metro/visualizer/($device)/index.tsx" />
  </Route>
</Routes>

Looks like /detail route is not nested as I thought it was according to the generated route config 🤔

I was expecting the generated output to look like this:

<Routes>
  <Route file="root.tsx">
    <Route path="dci/metro/visualizer/:device?" file="routes/dci/metro/visualizer/($device)/detail/index.tsx">
      <Route path="dci/metro/visualizer/:device?/detail" index file="routes/dci/metro/visualizer/($device)/index.tsx" />
    </Route>
    
  </Route>
</Routes>

This explains why my Outlet isn't working as expected 🤔

[potent scaffold]

Ok so I was playing around with different remix file/folder naming conventions and I think I've found my original issue.

I had an incomplete mental model for how the route generation worked

Link to table in the image:
https://github.com/remix-run/remix/discussions/7618#discussioncomment-7233475