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

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 =,
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 =;
    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