In my app I use react-redux-firebase version 2.5.1 with redux-firestore version ^0.13.0. I render a list of conversations with customers (called threads) and each time a user goes to another thread, until it's loaded I want him to see a loading spinner. The issue of mine is that only when I go to a thread for the first time after app deployment the spinner shows, after that each time I change a thread the method isLoaded is always true, even though I see that for some seconds the page shows the previous thread. Has anyone met with something like that and can help me how to solve it ?
Here is my component
const mapStateToProps = (state, props) => {
const customerId = props.match.params.id;
return {
thread: state.firestore.data.thread,
...
};
};
export default compose(
withStyles(styles),
connect(mapStateToProps, mapDispatchToProps),
firestoreConnect(props => [
{
collection: "thread",
doc: props.customerId,
storeAs: "thread"
}
...
])
)(ThreadView);
Here is my render method
render() {
const {firebase, thread} = this.props;
const res = !isLoaded(thread); // after the first load it's always false
console.log(`customerId: ${customerId}, isLoaded: ${res}`)
if (res) {
return <LoadingSpinner/>;
}
...
I also had this issue and so far haven't found a satisfactory solution. However, I did find a workaround:
Write a custom
isLoadedfunction that checks for any requests in progress:Because all the current pending request's statuses (true/false) are saved in the redux store under
firestore.status.requestingwe can check this, and see if any requests are currently still loading!It's not an ideal solution because it will check ALL in-progress requests, not just the specific one you want to check. However, depending on your use case, this may be enough.