Delay willEnter on TransitionMotion?

Hi All,

Wondering if there is a possible solution to this. I'm using TransitionMotion to animate the loading of filtered data on a page. When you click the filter it makes the query, at the same time animating the old data away and animating in new data.

The trouble I'm having is that sometimes the animation enters before the new data appears and then the data just pops in seconds after the animation is finished. This isn't solvable with stiffness and dampening because the speed is dependent on the network connection.

Is there a way to delay willEnter until I've received the data it's supposed to transition in? I'm okay with there being a pause or some "blank space" while I wait.

I know in many examples the data is passed through with the styles using a map. Sadly I'm not able to do the same because of the way the data and styles need to be passed through.

Here is the logic, for reference:

Thanks in advance!

```export default class Filters extends React.Component {
constructor(props) {
super(props);
this.state = {
currentFilter: null,
cs: null,

};
}

changeFilter = (e) => {
const query = (e && e.target.innerHTML) ? e.target.innerHTML.toLowerCase() : null;

window.history.pushState({}, '', `/crafting/${query ? `${query}` : ''}`);
this.setState(() => ({ currentFilter: query }));
}

getList = async () => {
const { data } = await axios.get(`/api/crafting?slug=${this.state.currentFilter}`);
this.setState({ cs: data.fields.caseStudies });
}

componentDidUpdate(prevProps, prevState) {
if (prevState.currentFilter !== this.state.currentFilter) {
this.getList();
}
}

willEnter = () => ({
scale: 0.01,
opacity: 0.01,
})

willLeave = () => ({
scale: spring(0.01, { stiffness: 260, damping: 25 }),
opacity: spring(0.0, { stiffness: 260, damping: 25 }),
})

render() {
return (

{ interpolatedStyles => {

return this.props.children(
this.changeFilter,
this.state.cs,
this.state.currentFilter,
interpolatedStyles
);
}
}

);
}
}