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
isLoaded
function 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.requesting
we 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.