javascripthtmlmeteormeteor-collections

How to delay showing of variable in meteor?

I am writing an application that shows an estimated wait time based on the count of the collection. The problem I am having is when the page is loaded or refreshed the waitTime displays, but it first displays 0 and after about a second it then displays the actual waitTime based on the count. I'm assuming this has something to do with the variable being delayed in getting the count from the collection so it shows the initial count of 0 and then gets the actual count and displays the waitTime?

Is there a way to get this to only show the exact wait time when it loads or is refreshed?

js:

Template.home.helpers({
waitTime: function() {
    var totalCount = Students.find().count();
    var hour = totalCount/4;

    if(totalCount < 4){
        return 15*totalCount + " minutes"
    }else if(totalCount >= 4 && totalCount%4 == 0){
        return hour + " hour(s)";
    }else if(totalCount >= 4 && totalCount%4 == 1){
        hour = hour - .25;
        return hour + " hour(s)" + " 15 minutes";
    }else if(totalCount >= 4 && totalCount%4 == 2){
        hour = hour - .5;
        return hour + " hour(s)" + " 30 minutes";
    }else if(totalCount >= 4 && totalCount%4 == 3){
        hour = hour - .75;
        return hour + " hour(s)" + " 45 minutes";
    }
  }
});

Html:

<template name= "home">
<body>
    <h2 id="insert">Approximate Wait Time: {{waitTime}}</h2>
    <div class="col-lg-6 col-lg-offset-3">
        <!-- Quick form from autoform package creates sign in form and populates collection with data-->
        {{>quickForm id="studentForm" collection="Students" type="insert" template="bootstrap3-horizontal" label-class="col-sm-3" input-col-class="col-sm-9"}}
    </div>
</body>
</template>
Solution

  • the most straightforward way is to not render your view (or at least the relevant parts of your view) until your data is ready. the 2 main ways are to either wait for the subscription to be ready, or wait until you have a data value you want.

    the latter would be difficult, because from what i can tell, 0 is a possible value. so i would suggest the former.

    assuming your subscription is tied to your template, you can wait for the subscription to be ready like this:

    <template name= "home">
<body>
    {{#if Template.subscriptionsReady}}
    <h2 id="insert">Approximate Wait Time: {{waitTime}}</h2>
    <div class="col-lg-6 col-lg-offset-3">
        <!-- Quick form from autoform package creates sign in form and populates collection with data-->
        {{>quickForm id="studentForm" collection="Students" type="insert" template="bootstrap3-horizontal" label-class="col-sm-3" input-col-class="col-sm-9"}}
    </div>
    {{else}}
      Loading...
    {{/if}}
</body>
</template>