Seu contêiner assina os dados e monitora o
ready
da assinatura Estado:createContainer(() => {
const todosHandle = Meteor.subscribe('tasks');
const loading = !todosHandle.ready();
return {
loading,
tasks: Tasks.find({}, { sort: { createdAt: -1 } }).fetch(),
};
}, App);
Isso significa que seu componente receberá um
loading
booleano prop que indica se os dados estão ou não disponíveis. Você pode usá-lo em seu componente para renderizar um loading
visualizar enquanto os dados estão carregando:class App extends Component {
//...
render() {
const {loading, tasks} = this.props;
if (loading) {
return (
<div className="spinner">
Loading...
</div>
);
}
return (
<div className="container">
<header>
<h1>Todo List</h1>
</header>
//...
</div>
);
}
}
ou qualquer outra combinação de componentes que dependa do estado de carregamento.
BTW, as
tasks
prop é um array, então usando tasks.length
em vez de Object.keys
é provavelmente melhor.