Call a function after a Dialog closes with a Tailwind animation

[jordanthornquest]

I'm currently working with the React Aria Tailwind Starter and React Router. All the components in this collection use tailwind-animate, tailwind-variants, and tailwindcss-react-aria-components.

I'm rendering the Dialog component when a user visits a route (for example, /new-post). When a user presses a "Submit" or "Cancel" button within the Dialog, I'd like to wait for the Dialog's closing animation to complete before navigating to a new route, which is accomplished by calling a navigate() function.

How would this be accomplished with React Aria?

[reidbarber]

I would use setTimeout to execute the navigate() function after a specified amount of time (i.e. 200ms for the tailwind starters)

setTimeout(() => {
  navigate("/new-post");
}, 200);

[jordanthornquest]

Will do, thank you!