Dialog: How to lazy import modals without breaking Transitions?

[mcgrealife]

The examples show rendering a mounted, with its internal open state initialized as false.

This works well, however, some of my modals have grown in size and are clogging the initial bundle. So I'd like to lazy import these large dialogs.

So I wrap the entire modal in state like:
{showModal && <LazyModal />}

And change the 's internal open state to initialize as true.

The problem with this pattern is that the Transitions (enterFrom, enterTo, etc.) are ignored. Maybe because showModal mounts/unmounts the component immediately.

Does anyone know of a better pattern to lazy import modals?

One way might be to keep the non-lazy mounted with internal show state initialized as false (like example docs), and instead Lazy import the Dialog content?

Any advice is appreciated.

[mcgrealife]

I found one solution:

In the parent component:
{showLazyModal && <LazyModal />}

Inside the LazyModal:

1. initialize the <Transition.Root/> open state as false.
   const [open, setOpen] = useState(false)

2. UseEffect on first mount to setOpen(true)
   useEffect(() => setOpen(true), [])

This keeps the intro transition

Then in the <Dialog/>'s onClose handler:

onClose={() => {
  setOpen(false) // local state
  setTimeout(() => setShowLazyModal(false), 300) // parent state
}}

Where the timeout duration is the same duration used in the <Transition.Child/>'s leave classes

It feels like an anti-pattern but works

[Phyllon]

Works perfectly, thx!