React native router flux; slow to load back to previous component - react-native

Question

I'm using react-native-router-flux in my Card component to to link to my playerPage component.
This is my Card component:
class Card extends Component {
state = {
visible: false,
currentUser: ''
}
componentDidMount() {
if(this.props.player !== undefined){
axios.get(`http://localhost:4000/reports?players=${this.props.player}&startDate=2019-03-20T03:10:43.990Z&sort=date`)
.then(response => {
console.log(response)
this.props.loadCards(response.data)
})
} else if(this.props.team !== undefined) {
axios.get(`http://localhost:4000/reports?team=${this.props.team}&startDate=2019-03-20T03:10:43.990Z&sort=date`)
.then(response => {
console.log(response)
this.props.loadCards(response.data)
})
} else if(this.props.league !== undefined) {
console.log('got here')
axios.get(`http://localhost:4000/reports?league=${this.props.league}&startDate=2019-03-20T03:10:43.990Z&sort=date`)
.then(response => {
console.log(response)
this.props.loadCards(response.data)
})
} else {
axios.get(`http://localhost:4000/reports?league=NBA&league=NFL&league=MLB&startDate=2019-03-20T03:10:43.990Z&sort=date`)
.then(response => {
this.props.loadCards(response.data)
})
Auth.currentAuthenticatedUser()
.then((data) => {
this.props.loadFilters(data.attributes.sub)
this.setState({currentUser: data})
})
}
}
render() {
let cardValues = this.props.search === null ? this.props.card : this.props.search
return (
<View >
{
cardValues != null ?
cardValues.map((v,i) => {
return(
<View key={i}>
<Collapse
>
<CollapseHeader
>
<View>
<Text>
<Icon
name={this.iconName(v.player.team.league.acronym)}
size={12}
color='black'/>{' '}
<Text
onPress={
()=> {
Actions.playerPage({
player: v.player._id
})
}
}
>{v.player.player_name} - </Text>
</Text>
<Text>
<View>
</View>
</View>
<View>
</View>
</CollapseHeader>
</Collapse>
</View>
)
})
: null
}
</View>
)
}
}
export default connect(mapStateToProps, { loadCards, countMore, loadFilters })(Card))
This is my playerPage component:
PlayerPage = (props) => {
return(
<View>
<Header
rounded
>
<View style={{flexDirection: 'row', flexWrap: 'wrap', right: '43%', top: '50%', paddingBottom: 900}}>
<Icon name='chevron-left' size={10} color='#006FFF' />
<NativeText
onPress={() => {Actions.fullApp()}}
style ={{color: '#006FFF', fontSize: 12, fontFamily: 'Montserrat-Regular', top: '900%' }}
>
Back
</NativeText>
</View>
</Header>
<Card
player={props.player}
team={props.team}
league={props.league}
/>
</View>
)
}
export default PlayerPage
When I link to playerPage I render a new version of Card on playerPage.
The data that is shown on playerPage is determined by the API call in the componentDidMount of the Card component.
I initially direct to playerPage with onPress={ ()=> {Actions.playerPage({player: v.player._id})}}
This loads fine.
When I direct a user back to the fullApp component, which has the Card component on it, the data loads, but much more slowly.
This is what it looks like:
https://streamable.com/ugc0b
Any ideas why it loads slowly? That's my issue.