React Redux Firebase - isLoaded only false for the first document when using firestore

577 views Asked by At

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/>;
            }
...
1

There are 1 answers

0
pureth On BEST ANSWER

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:

const checkIsLoaded = function(firestore) {
    return !Object.values(firestore.status.requesting).find(isRequesting => isRequesting);
};

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.