Question

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.

Answer 1

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>