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