Route Modal is not animating on route exit

[cliffordfajardo]

I was able to create a route modal, which is super awesome for directly linking to a modal 🔥
The modal is able to animate in when the route is activated just fine.
However, when the route is no longer active (closing the modal) the animation does not work.

001-modal-no-exit-transition.mp4

Has anyone found a workaround for this recently?
Sergio did mention using useOutlet hook for this (still need to explore), I wish I didn't have to resort to going outside of just using as normal though

https://codesandbox.io/s/antd-remix--modal-no-exit-transition-forked-bd6ckh?file=/app/routes/employees.tsx

References

• Remix Discord Thread: https://discord.com/channels/770287896669978684/1013478809145708667

[cliffordfajardo]

I was able to get it to animate using useOutlet hook based on this response from @anubra266

I wish we could our entire <Modal / Drawer> in its own file 😢
Instead we have to break our modal code out into 2 files:

• put the at the page level
• put the content of the modal in the nested route

You lose some code colocation when you have to do it this way unfortunately

hacky--use-outlet-hook-for-modal-exit.mp4

https://codesandbox.io/s/antd-remix--modal-route-useoutlet-exit-transition-forked-zxxuon?file=/app/routes/employees.tsx

[anubra266]

@cliffordfajardo You can out the drawer/outlet in a separate component.
https://codesandbox.io/s/remix-modal-route-tk52kr?file=/app/routes/employees.tsx

[cliffordfajardo]

Thank - I think there was a typo somewhere so I forked and created a new sandbox from your code:
https://codesandbox.io/s/remix-modal-route-forked-x7dvjt?file=/app/routes/employees.tsx

Video Demo

model-outlet-example.mp4

[cliffordfajardo]

I found another way to get the modal to animate out without using useOutlet and keeping the entire modal in its own file (not in the parent).

In my <Modal/Drawer> component:

• define a isModalOpen useState variable
• when the the onModalClose is clicked, I set isModalOpen to false, this allows the component to re-render and give the modal the opportunity to close + animate
• then I call useNavigate inside of a setTimeout of about 100ms to ensure the modal has closed.

Another member in the Remix discord said this though:

Having the Modal in the parent route instead of the child route may be a better idea. The parent controls where the child renders. Also, if an error is thrown in the child route, the error boundary would automatically be handled in the modal because of the parent route. No need to repeat the Modal in the child's error boundary.
With the solution of using setTimeout & keeping your entire modal in its own component, you would need to repeat an ErrorBoundary

Though i do like that with this solution in the video below, the whole component is encapsulated in one file

001-drawer-dismiss-wait-for-drawer-close-animation.mp4

References

• Demo codesandbox: https://codesandbox.io/s/antd-remix--route-modal-exit-transition-settimeout-forked-h178y0?file=/app/routes/employees/modal.tsx
• Remix Discord thread: https://discord.com/channels/770287896669978684/1013478809145708667

[anubra266]

@cliffordfajardo What would happen on slow connections? Your app could still be in the modal route while the modal is closed.

[cliffordfajardo]

What would happen on slow connections?

I may be mistaken, but I don't think internet connection is at play here when the modal is closing
The only purpose of the setTimeout is to give the Modal component the opportunity to close with an animation. You could even set the setTimeout time to 1, 100 or even less time and it would still work

Once we are sure that the modal is closed, we call navigate to close out the route entirely

our app could still be in the modal route while the modal is closed.

Thats true, with this approach, for a brief period of time the Modal will be closed & I will still be on the /modal route, but it will be for a few hundred milliseconds, maybe less -- not sure if this might be a problem; can't think of too many cases where it might be at this time

[anubra266]

@cliffordfajardo Internet connection can affect navigation.

[cliffordfajardo]

Internet connection can affect navigation.

That's true
With either approach (using a <ModalOutlet>) or with the setTimeout approach you are causing a route navigation when you open the modal, but you are only fetching data if the modal component has a loader in it

Or are you saying one approach has an advantage over the other?

I think I understand what you're getting to:
With the <ModalOutlet> modal approach you can show the modal open immediately while data is being fetched for its content

[cliffordfajardo]

Wanted to share more learnings while playing around with the idea of route modals.

Background Context
Initially wanted to use route to render a modal.
This modal of mine has multiple <select> elements inside. For many of the <select>s in the Modal, I need to hit an API to get a list of possible values for the user.

@anubra266
I was able to re-create what I think you were alluding to. I put an artificial delay inside my loader that renders my route (which renders a modal). The modal takes a long time to open because Remix/React router will not render the Modal/Component until the loader data is ready.

route-modal--modal-fetches-data--fake-delay.mp4

Summary
If you're route modal doesn't need to fetch data, perhaps you're rendering a login form that does a mutation, it works great for those simpler cases. If you're modal has lots of fields where you need to make API calls to fetch the list of items for many different elements for example, its not such as great use case. Client side rendering and fetching the list of select options when the modal opens is a better experience. I was actually doing this already in my non-remix app using react-query.

[UltraWelfare]

It's a bit frustrating that you have to useTimeout() in order to arbitrarily wait for the animation to end then navigate back to the list...
This thread is kinda old, has anyone found a better solution yet?

[quentinlagache]

It's a bit frustrating that you have to useTimeout() in order to arbitrarily wait for the animation to end then navigate back to the list... This thread is kinda old, has anyone found a better solution yet?

useViewTransitionState