user3142695 user3142695 - 4 years ago 107
React JSX Question

How to check for subscription.ready() in a react component?

This is a very basic example how I get the data from the mongoDB to my meteor/react application.

Now I would like to show a loading icon while the data is getting loaded. Therefore I need to use something like

subscription.ready()
but where should I put this?

import { Meteor } from 'meteor/meteor'
import { createContainer } from 'meteor/react-meteor-data'

import Example from '../components/example.jsx'
import ExampleCollection from '/imports/api/collection.js'

export default createContainer((props) => {
const id = props.params.id,
subscription = Meteor.subscribe('anything', id)
data = ExampleCollection.find({ parent: id }).fetch()

return { data: data }
}, Example)

zim zim
Answer Source

i do it like this:

    render() {
        if (this.props.isLoading) {
            return null; // or show loading icon
        }

        return (
            // stuff
        );
    }


export default createContainer((props) => {
    const   id = props.params.id;
    let subscription = Meteor.subscribe('anything', id);
    let data = ExampleCollection.find({ parent: id }).fetch();
    let isLoading = !subscription.ready();

    return {data, isLoading};
}, Example);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download