so how can solve this?

Can we either run the animation i.e add the class after everything has finishing re-rendering?

i dont think so…

Or can we ensure the animation has time to run before the whole page re-renders.

next-page-transitions, solves this.

it solves the problem of making sure only one page component is mounted at a time and that the next page isn’t mounted until the previous one has completed its exit animation.

The timeout prop is particularly useful. It lets you delay how long it takes for the next page to render.