Pages

Tuesday, May 3, 2016

Learning Meteor.js [Part 11]: Add a 'spinner' indicator while data is loading

It is not noticeable while developing, but there is a window of time between when the page has loaded and when the data arrives from the subscription. During that time it would be nice to show a 'loading' indicator.

Meteor provides a helper that returns true/false depending on all subscriptions are ready, this can be used to show or hide the loading spinner:
{{#unless Template.subscriptionsReady}}
  <div class="loading">
    <img src="images/loading.gif" />
  </div>
{{else}}
  <ul class="list-group">
    ...
  </ul>
{{/unless}}

Just make SURE you are subscribing using the subscribe() method available on the template instead of the generic Meteor.subscribe() method. The 'subscriptionsReady' helper is only aware of subscriptions done on the template instance.

Lastly, one useful trick to test delays is to add a call to Meteor._sleepForMs() before returning the cursor from the publication:
Meteor.publish('ingredients', () => {
   Meteor._sleepForMs(2000);
   return Ingredients.find();
});

You can follow the code by using this repo tag or visit the live demo.

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.