CODEWITHSUNDEEP
meteorreactjs
tdotcspot
tdotcspot

Reputation: 345

Show Loading Screen Until Data Is Populated - React & Meteor

I'm trying to populate a table and only want to show the data when everything has been fetched. I'd like to show a basic "Loading..." text. Currently I have this:

getNames() {
   return Names.find().fetch();
}

render() {
   let mapData = this.getNames().map((name) => {
      return <Name key={name.id} name={name} />
   });

   if (!mapData) {
     return (<h1>Loading...</h1>);
   }

   return (
      <ul>
        {mapData}
      </ul>
   );
}

This is just a basic example, but I'm grabbing alot of data from Names.find().fetch()... though it seems that once mapData starts getting populated, the data will partially load (showing possibly the first few items, then completing).

I know I'm not doing this correctly. I'm just wondering how other people deal with properly showing a progress bar in React.

I thought about just setting a delay in componentDidMount, but that doesn't seem to be a great solution.

Any help would be greatly appreciated!

Thanks! T

Upvotes: 0

Views: 512

Answers (1)

sheeldotme
sheeldotme

Reputation: 2503

Meteor.subscribe takes a callback that will be called once the subscription has loaded its data.

See: http://docs.meteor.com/#/full/meteor_subscribe

Upvotes: 1

Related Questions