2

When a meteor app is deployed on server, it takes a considerable amount of time (3-4 seconds) for the data to be fetched from mongodb. In my app, I have a template that is bound to data through an #each block helper.

{{#each items}}
    {{> item_info}}
{{else}}
    No items yet.
{{/each}}

So when the app loads in a new browser session, users see the message No items yet till the time data has finished loading. When data becomes available, that message gets replaced with the actual data. But this results in a bad user experience because some users actually think, for those 3-4 seconds, that they have lost their data.

My question is -- is it possible to change that "else" message to something like "Loading..." while data is being fetched? Or is there a more elegant solution to this problem?

Thanks.

Anurag Bhandari
  • 623
  • 2
  • 6
  • 20

1 Answers1

5

I think you should use Session with onComplete() function inside the Meteor.subscribe()

This will executed automatically when the subscription is completed, i.e ur collections are completed loading on client.

For Eg. 

Meteor.subscribe('yourCollection', function onComplete(){

         // set a session to true indicating your collection is loaded.
         Session.set('itemsLoaded', true);
});

Then call your template helper based on the session value as: 

Template.yourTemplate.isLoaded = function(){

     return Session.get('itemsLoaded'); 
}

And your html will look like:

<template name="yourTemplate">
    {{#if isLoaded}}
        {{#each items}}
          {{> item_info}}
        {{/each}}
    {{/if}}

    {{#unless items}}
         <img src="images/loader.gif">
    {{/unless}}
</template>
sohel khalifa
  • 5,602
  • 3
  • 34
  • 46
  • Isn't {{#unless}} same as saying "if not"? In that case, putting markup inside {{#unless}} would be the same as putting it inside the {{else}} block of an {{#if}}. – Anurag Bhandari Dec 06 '12 at 10:15
  • Also just to be sure, I tried your suggestion, but that didn't solve the problem. The loader image served the same purpose as was done by "no items yet" message. Therefore, the loader looks fine while the data is loading, but looks bad when there are genuinely no items inside a list. – Anurag Bhandari Dec 06 '12 at 10:19
  • The onComplete callback of subscribe method kind of solved my problem. Thanks. – Anurag Bhandari Dec 06 '12 at 12:10