react native: run spinner until ListView rendering - firebase

Question

in my app I pull data from Firebase and render them in a ListView. I want that the spinner will run until the entire list will appear.
I added the a view with a conditions that show if the state.loading is 'true', but if I change it in componentDidMount function does not work because the list is not yet displayed
Here is my code:
module.exports = React.createClass({
getInitialState() {
return({
loading: false,
displayName: '',
title: '',
dataSource: ds.cloneWithRows([{
title: '',
author: ''
}])
})
},
componentDidMount() {
let user = firebaseApp.auth().currentUser;
if (!user.displayName) {
this.props.navigator.push({
name: 'chooseName'
})
} else {
// proceed normally with application
this.setState({
displayName: user.displayName
})
this.listenForItems(topicsRef);
}
},
listenForItems(ref) {
ref.on('value', (snap) => {
let topics = [];
snap.forEach(topic => {
topics.push({
title: topic.val().title,
author: topic.val().author,
key: topic.key
})
})
this.setState({dataSource: ds.cloneWithRows(topics)});
})
},
signOut() {
// sign out the user
firebaseApp.auth().signOut()
.then(() => {
// Sign out successful
this.props.navigator.popToTop();
}, (error) => {
console.log(error);
})
},
details(data) {
this.props.navigator.push({
name: 'topicDetail',
displayName: this.state.displayName,
title: data.title,
author: data.author,
row_uid: data.key
})
},
renderRow(rowData) {
return (
<TouchableOpacity style={styles.row}
onPress={() => this.details(rowData)}
>
<Text style={styles.rowTitle}>
{rowData.title}
</Text>
<Text>
{rowData.author}
</Text>
</TouchableOpacity>
)
},
addTopic() {
topicsRef.push({
title: this.state.title,
author: this.state.displayName
})
},
render() {
if (this.state.loading) {
return (
<Container style={styles.containerSignIn}>
<Content>
<Spinner />
</Content>
</Container>);
}
return (
<View style={styles.flexContainer}>
<View style={styles.header}>
<TouchableOpacity
onPress={() => this.signOut()}
>
<Text style={styles.link}>
Sign out
</Text>
</TouchableOpacity>
<Text style={styles.title}>
{this.state.displayName}
</Text>
</View>
<View style={styles.body}>
<TextInput
placeholder='Something on your mind?'
style={styles.input}
onChangeText={(text) => this.setState({title: text})}
onEndEditing={() => this.addTopic()}
/>
<ListView
style={styles.list}
enableEmptySections={true}
dataSource={this.state.dataSource}
renderRow={(rowData) => this.renderRow(rowData)}
/>
</View>
</View>
)
}
});

Answer 1

I assume your Spinner component works.
Due to possible issues in your react lifecycle what I can recommend in the first run:
1.) if you want your Spinner to be active when your View shows up, set state.loading to true when defining your initialState.
getInitialState() {
return({
loading: true,
...
})
}
2.) change the loading state in the (success) Promise callback of your firebase request and NOT in componentDidMount().
listenForItems(ref) {
ref.on('value', (snap) => {
...
this.setState({
loading: false,
dataSource: ds.cloneWithRows(topics)
});
})
}
Hope that helps.