Show Loading Screen Until Data Is Populated - React

help
1

Hi there,

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 this. 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

2

You should get a handle from the subscribe method and then use the handle.ready() to show a loading screen. http://docs.meteor.com/#/full/meteor_subscribe

getMeteorData() {
    ...
    const handle = Meteor.subscribe('my-collection');
    return {
        subsReady: handle.ready(),
        ...
    }
}
...
render() {
    return( this.data.subsReady() ? showMapData() : showLoadingScreen() );
}

hope this made sense to you.

3

Thanks for the help! It definitely did.

I’ve been using TrackerReact as a data loader… Not sure what I was doing wrong. I ended up switching to meteor/react-meteor-data and using your example above, it worked out great.

Thanks again.
T