Meteor / ReactJS - Problema de parpadeo de la interfaz de usuario:renderizar dos veces antes y después de verificar una base de datos

Su contenedor se suscribe a los datos y supervisa el ready de la suscripción estado:

createContainer(() => {
  const todosHandle = Meteor.subscribe('tasks');
  const loading = !todosHandle.ready();

  return {
    loading,
    tasks: Tasks.find({}, { sort: { createdAt: -1 } }).fetch(),
  };
}, App);

Esto significa que su componente recibirá un booleano loading prop que indica si los datos están disponibles o no. Puede usarlo en su componente para representar una loading ver mientras se cargan los datos:

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>
    );
  }
}

o cualquier otra combinación de componentes que dependa del estado de carga.

Por cierto, las tasks prop es una matriz, por lo que usar tasks.length en lugar de Object.keys probablemente sea mejor.