Exibir uma mensagem de espera enquanto carrega os dados no Meteor

O Meteor é ótimo quando se trata de trabalhar com dados, mas quando seu banco de dados cresce, às vezes pode demorar um pouco mais até que todos os seus dados estejam disponíveis no banco de dados local do mini mongo.

Se você não fizer nada, seu modelo será renderizado mais de uma vez, o que pode ser irritante, mas acima de tudo, você verá as listas crescerem e as seleções desaparecerem à medida que os dados forem carregados.

Para evitar isso, existe um mecanismo simples que levei algum tempo para descobrir. No siprito de compartilhar. Aqui está:

O modelo é dividido em dois: uma parte de espera e uma parte de dados:

<template name="reminder">
   {{#if dataLoaded}}
      "do something nice"
   {{else}}
      {{lbl "pleaseWait"}}<br/>
      <img src="/images/progress.gif"/>
   {{/if}}      
</template>

No javascript do modelo, você tem algo assim:

var formDataHandle = {};

Template.reminder.dataLoaded = function() {
   return formDataHandle && formDataHandle.ready();
}

Template.reminder.formData = function() {
   if( formDataHandle && formDataHandle.ready() ) {
      var form = Forms.findOne({"techName" : "bedenkfrist"});
      return FormDatas.find({"form.id": form.id, state: "PRINT-REMIND" });
   }
}

Template.reminder.created = function() {
   formDataHandle = Meteor.subscribe("reminderList");
}

Este código é todo baseado no identificador de assinatura . Como o identificador é uma fonte de dados reativa, o modelo será renderizado novamente quando o valor mudar. Exibindo o conteúdo real assim que a inscrição for marcada como ‘pronta’