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

Question

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)

Answer 1

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);