CODEWITHSUNDEEP
javascripthtmlmeteormeteor-collections
E. Pace
E. Pace

Reputation: 75

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>

Upvotes: 0

Views: 41

Answers (2)

zim
zim

Reputation: 2386

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>

Upvotes: 1

Thai Tran
Thai Tran

Reputation: 9935

var totalCount = Students.find().count();

When the first time the page is loaded, the reactivity of meteor has not yet established, thus the count is always 0, making the display show 0. You will need to check if the subscription has been done yet, and then display the page 

Template.home.created = function() {
  this.loading = new ReactiveVar(true) 
  let subHandler = Meteor.subscribe('your-publication-name')
  this.loading.set(!subHandler.ready())
}

then in your template helper, check if the loading is true, return the loading text or sth, else return the result

Something like this 

waitTime: function() {
  if (Template.instance().loading.get()) return "Loading";

  // the rest of the code
}

Upvotes: 0

Related Questions