Display a wait message while loading data in Meteor

Meteor is great when it comes to working with data but when your database grows, it can sometimes take a bit longer until all your data is available in the local mini mongo database.

If you do nothing, your template will render more than once, which can be annoying, but most of all you will see the lists grow and selections vanish as the data is loaded.

To avoid this, there is a simple mechanism which took me some time to figure out. In the siprit of sharing. Here it is:

The template is split in two: a waiting part and a data part:

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

In the template's javascript you have something like this:

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

This code is all based on the subscription handle. Because the handle is a reactive data source, the template will rerender when the value changes. Displaying the real content as soon as the subscription has been marked ´ready´