Component loading and transition animations with react-router - reactjs

Question

I am using React, react-router and I am having page-like components. I'd like to implement two phase transition animations when the main view of the application changes
<Link> is clicked
Old (current) view fades out (component dismount?)
A spinner-like overlay animation "loading" is displayed
API call is triggered and the state is updated from the server (using AJAX)
State is updated
Spinner-like animation fades out
New component with freshly loaded state is fade in (component mount?)
I am looking to pointers what events, hooks and component method overloads I could use to implement this in generic manner for react-router and <Link>.

Answer 1

Perhaps you can try the:
1) onEnter
2) onLeave
Methods From react-router.
https://github.com/reactjs/react-router/blob/master/docs/API.md
You can flip a switch in state to change the UI to make spinner appear/disappear, etc. using the above two methods.

Answer 2

you can use ReactCSSTransitionGroup
import React from 'react'
import { render } from 'react-dom'
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
import { browserHistory, Router, Route, IndexRoute, Link } from 'react-router'
import './app.css'
const App = ({ children, location }) => (
<div>
<ul>
<li><Link to="/page1">Page 1</Link></li>
<li><Link to="/page2">Page 2</Link></li>
</ul>
<ReactCSSTransitionGroup
component="div"
transitionName="example"
transitionEnterTimeout={500}
transitionLeaveTimeout={500}
>
{React.cloneElement(children, {
key: location.pathname
})}
</ReactCSSTransitionGroup>
</div>
)
const Index = () => (
<div className="Image">
<h1>Index</h1>
<p>Animations with React Router are not different than any other animation.</p>
</div>
)
const Page1 = () => (
<div className="Image">
<h1>Page 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing</p>
</div>
)
const Page2 = () => (
<div className="Image">
<h1>Page 2</h1>
<p>Consectetur adipisicing elit, se.</p>
</div>
)
render((
<Router history={browserHistory}>
<Route path="/" component={App}>
<IndexRoute component={Index}/>
<Route path="page1" component={Page1} />
<Route path="page2" component={Page2} />
</Route>
</Router>
), document.getElementById('example'))
css
.Image {
position: absolute;
height: 400px;
width: 400px;
}
.example-enter {
opacity: 0.01;
transition: opacity .5s ease-in;
}
.example-enter.example-enter-active {
opacity: 1;
}
.example-leave {
opacity: 1;
transition: opacity .5s ease-in;
}
.example-leave.example-leave-active {
opacity: 0;
}
.link-active {
color: #bbbbbb;
text-decoration: none;
}