Add a loading indicator or spinner for rendering delay (Not for subscription ready)

Question

My meteor app template is taking a 1 second delay between creation and rendering. The delay is after the data subscription is available, so it seems that the 1 second is the time required by Blaze to read the data locally and draw all the objects in DOM (Perhaps most of them are in cache).

The question is: There is a way to add a spinner in the loaded template to cover the delay between myTemplate.OnCreated and myTemplate.onRendered?

Thanks in advance.

Answer 1

The solution was very similar in logic to @jordanwillis solution, just was needed to add a timeout on template created:

<template name="contactList">
   {{#if contactListRendered }}
      <!-- Here show the contact list -->
   {{else}}
      <!-- show loading indicator or spinner  -->
   {{/if}}
</template>

Logic:

Template.contactList.onCreated( function() {
   Session.set("contactListRendered", false);
});

Template.contactList.onRendered( function() {
   setTimeout(function(){Session.set("contactListRendered", true);}, 1);
});

Template.contactList.helpers({
   contactListRendered: function() {
   return Session.get("contactListRendered");
}});