How does Meteor.js decide the order in which components are rendered? - meteor

Question

I have the following code in Meteor.js written by someone else
<div>
<div> {{> yield region='tickets'}} </div>
<div> {{> yield region='ticketView'}} </div>
<div> {{> yield region='analytics'}} </div>
</div>
It works fine but I have an issue with the order in which those components are rendered. When that page is opened, the 'analytics' clearly loads/renders first, then once that is done the rest of it renders. I would like it to load/render in the order that the components are called.
Attaching template files to take a look at
region='tickets' ====> ticketsList (This should always load first)
region='ticketView' ====> ticket_view
region='analytics' ====> analytics
<template name="ticketsList">
<div id="tickets-list" class="tickets-list">
<div class="btn-group btn-group-justified">
<div class="btn-group btn-group-lg">
<button class="btn btn-primary {{unresolvedActive}}" id="unresolved">
Unresolved
<span class="label label-pill label-danger label-as-badge">{{ unresolvedTicketsCount }}</span>
</button>
</div>
<div class="btn-group btn-group-lg">
<button class="btn btn-primary {{resolvedActive}}" id="resolved">
Resolved
</button>
</div>
</div>
<div class="row m-t-sm">
<div class="col-xs-3">
{{> broadcast}}
</div>
<div class="col-xs-3" style="margin-left: 12px;">
<button class="btn btn-info" type="button" id="create-shift-report" style="
background-color: #278006;
border-color: #278006;
border-radius: 25px;
">
<span class="glyphicon glyphicon-plus" aria-hidden="true"
style="background-color: #278006; color: white"></span>
<i class="fa fa-folder-open fa-lg" aria-hidden="true"></i>
</button>
</div>
<div class="col-xs-5" style="float:right">
<button class="btn btn-info" type="button" id="create-ticket" style="
float: right !important;
background-color: #56cf1b;
border-color: #56cf1b;
border-radius: 25px;
">
<span class="glyphicon glyphicon-plus" aria-hidden="true"
style="background-color: #56cf1b; color: white"></span>
Create Ticket
</button>
</div>
</div>
<div class="row m-t-sm">
<div class="col-sm-12" style="padding: 0px">
<div class="wrapper">
<input type="text" placeholder="Search ..." class="searchInput" id="searchQuery" name="search" />
<button type="submit" class="searchButton search-button">
{{#if isSearch}}
<i class="fa fa-times clearbutton" aria-hidden="true"></i>
{{/if}}
<i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
{{#if isSearch}}
<div class="row m-t-sm">
<div class="col-sm-12">
<div class="wrapper">
<i>
<h4>Search Results</h4>
</i>
</div>
</div>
</div>
{{/if}}
<div class="row m-t-sm">
<div class="col-sm-12">
<div class="wrapper">
<span style="font-style: italic;">Filter by department: </span>
<select class="ticket-department-filter" id="departmentFilter">
<option>All</option>
{{#each tags}}
<option value={{this.id}}>{{this.name}}</option>
{{/each}}
</select>
</div>
</div>
</div>
<div class="row m-t-sm">
<div class="col-sm-12">
<div class="wrapper">
<span style="font-style: italic;">Filter by source: </span>
<select class="ticket-department-filter" id="sourceFilter">
<option>All</option>
{{#each sourceFilter}}
<option>{{this}}</option>
{{/each}}
</select>
</div>
</div>
</div>
<div class="tickets scrollbar m-t-sm">
{{#if tickets.length}} {{#each tickets}} {{> ticketItem}} {{/each}} {{#if
showLoading}}
{{> LoadingNew }}
{{else}} {{#if noMore}}
<div class="alert alert-warning m-t-sm" style="text-align: center; vertical-align: middle; padding: 5px">
No more tickets available!
</div>
{{else}}
<div class="m-t-sm" style="text-align: center">
<button id="show-more" class="btn btn-primary"
style="width: 100px; background-color: #337ab7; border-color: #2e6da4">
Show More
</button>
</div>
{{/if}} {{/if}} {{else}} {{#if showLoading}} {{> LoadingNew }} {{else}}
<hr />
<h2 class="text-center" style="font-size: 14px">
<i>No outstanding tickets</i>
</h2>
<hr />
{{/if}} {{/if}}
</div>
</div>
{{> shiftReportModal}}
<div id="new-ticket-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="background-color: #83ccff">
<button type="button" class="close" data-dismiss="modal">
×
</button>
<h4 class="modal-title" style="text-align: center; color: #ffffff">
Create a New Ticket
</h4>
</div>
<form class="form-horizontal" id="create-ticket-form">
<div class="modal-body">
<div class="form-group">
<div class="col-sm-3"><label for="source">* Source</label></div>
<div class="col-sm-9">
<label class="radio-inline">
<input type="radio" name="source" id="call" value="call" />
Call
</label>
<label class="radio-inline">
<input type="radio" name="source" id="inPerson" value="in-person" />
In-Person
</label>
<label class="radio-inline">
<input type="radio" name="source" id="email" value="email" />
Email
</label>
<label class="radio-inline">
<input type="radio" name="source" id="dnd" value="dnd" />
DND
</label>
<label class="radio-inline">
<input type="radio" name="source" id="shift-report" value="shift-report" />
Shift Report
</label>
</div>
<div class="col-sm-3"></div>
<div class="col-sm-9">
<label class="radio-inline">
<input type="radio" name="source" id="soft-check-in" value="soft-check-in" />
Soft check-in
</label>
<label class="radio-inline">
<input type="radio" name="source" id="amenity" value="amenity" />
Amenity
</label>
<label class="radio-inline">
<input type="radio" name="source" id="request" value="request" />
Request
</label>
<label class="radio-inline">
<input type="radio" name="source" id="repair" value="repair" />
Repair
</label>
</div>
</div>
<div class="form-group">
<label class="col-sm-3" for="guestName">Guest Name</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="guestName" name="guestName" />
</div>
<label for="autoFill">OR Auto-Fill </label>
<select id="autoFill" name="autofill">
<option value="-1">Select Guest</option>
{{#each pastGuests}}
<option value="{{ #index }}">
{{ receiverName }} ({{ roomNumber }})
</option>
{{/each}}
</select>
</div>
<div class="form-group">
<label class="col-sm-3" for="roomNumber">* Room #</label>
<div class="col-sm-9">
<input type="text" class="form-control" required id="roomNumber" name="roomNumber" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3" for="reservationNumber">Reservation #</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="reservationNumber" name="reservationNumber" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3" for="email">Email</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="emailAddress" name="emailAddress" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3" for="phoneNumber">Phone #</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="phoneNumber" name="phoneNumber" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3" for="notes">* Notes:</label>
<div class="col-sm-9">
<textarea type="text" class="form-control" required id="notes" name="notes" rows="3"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="submit">Save</button>
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</form>
</div>
</div>
</div>
</template>
<template name="ticketView">
<div>
{{> ticketItemView}}
</div>
<div id="tickets-list" class="tickets-list ">
<div class="btn-group btn-group-justified">
{{#if oleryTabs}}
<div class="btn-group btn-group-lg">
<button class="btn1 email-btn {{resolvedActive}} {{#if noEmail}}simptip-position-top{{/if}}"
id="respondTab" style="background: #41e1eb;">
Respond
</button>
</div>
{{else}}
<div class="btn-group btn-group-lg">
<button class="btn1 email-btn {{resolvedActive}} {{#if noEmail}}simptip-position-top{{/if}}"
id="emailtab" disabled="{{noEmail}}"
data-tooltip="{{#if noEmail}}In-app communication unavailable for Custom Ticket{{/if}}">
Email
{{#unless noEmail}}<label class="counts">({{emailcount}})</label>{{/unless}}
</button>
</div>
<div class="btn-group btn-group-lg">
<button class="btn1 sms-btn {{resolvedActive}} {{#if noPhone}}simptip-position-top{{/if}}"
id="smstab" disabled="{{noPhone}}"
data-tooltip="{{#if noPhone}}In-app communication unavailable for Custom Ticket{{/if}}">
SMS
{{#unless noPhone}}<label class="counts">({{smscount}})</label>{{/unless}}
</button>
</div>
{{/if}}
<div class="btn-group btn-group-lg">
<button class="btn1 staff-btn {{unresolvedActive}}" id="staffnotestab">Notes
<label class="counts">({{staffcount}})</label>
</button>
</div>
</div>
</div>
<div id="show" style="display: none;">
<div class="comments">
{{> commentsList}}
</div>
<div class="comment-form">
{{> commentSubmit}}
</div>
</div>
<div id="show2" style="display: none;">
<div class="comments">
{{> sendEmailList}}
</div>
{{#unless noEmail}}
<div class="comment-form">
{{> sendemail}}
</div>
{{/unless}}
</div>
<div id="show3" style="display: none;">
<div class="comments">
{{> sendSmsList}}
</div>
{{#unless noPhone}}
<div class="comment-form">
{{#if isPhoneNumberExists}}
{{> sendsms}}
{{/if}}
{{> closesms}}
</div>
{{/unless}}
</div>
<div id="show4" style="display: none;">
<div class="comments">
<div class="panel panel-danger resolution-history" style="border-color: #41E1EB;">
<div class="panel-heading" style="background: #41e1eb; border-color: #41E1EB;">
<p>Respond directly on the review site.</p>
</div>
<div class="panel-body" style="max-height: none; border-color: #41E1EB;">
<p>
You can respond to this review using the link below. It will take you to the site's admin portal where you
can post a reply.
</p>
{{#if oleryIframe}}
<iframe src="{{oleryTabs.respond_url}}" style="width: 100%; height: 450px;"></iframe>
{{else}}
<a href="{{oleryTabs.respond_url}}" target="_blank">
{{oleryTabs.respond_url}}
</a>
{{/if}}
</div>
</div>
</div>
</div>
</template>
<template name="analytics">
<div class="panel panel-success analytics scrollbar ">
<div class="panel-heading">
<h2>Statistics</h2>
</div>
<div class="">
{{#if mobile}}
<div id="statistics-dashboard" style="border: 1px solid white">
<div class="row">
<button class="btn btn-primary {{overallActive}} col-xs-3" id="overall" style="border: 1px solid white; font-size: 8px; padding: 10px 0; text-align: center;">
{{#if smallMobile}}
<img src="/Overall_icon.png" style="height: 12px; width: 12px;">
{{else}}
<img src="/Overall_icon.png" style="height: 20px; width: 20px;">
{{/if}}
Overall
</button>
<button class="btn btn-primary {{teamActive}} col-xs-3" id="team" style="border: 1px solid white; font-size: 8px; padding: 10px 0; text-align: center;">
{{#if smallMobile}}
<img src="/Team_icon.png" style="height: 12px; width: 12px;">
{{else}}
<img src="/Team_icon.png" style="height: 20px; width: 20px;">
{{/if}}
Team
</button>
<button class="btn btn-primary {{resolutionActive}} col-xs-3" id="resolution" style="border: 1px solid white; font-size: 8px; padding: 10px 0; text-align: center;">
{{#if smallMobile}}
<img src="/Resolution_icon.png" style="height: 12px; width: 12px; padding: 0; margin: 0;">
{{else}}
<img src="/Resolution_icon.png" style="height: 20px; width: 20px;">
{{/if}}
Resolve
</button>
<button class="btn btn-primary {{shiftActive}} col-xs-3" id="shift" style="border: 1px solid white; font-size: 8px; padding: 10px 0; text-align: center;">
{{#if smallMobile}}
<img src="/Shifts_icon.png" style="height: 12px; width: 12px; padding: 0; margin: 0;">
{{else}}
<img src="/Shifts_icon.png" style="height: 20px; width: 20px;">
{{/if}}
Shift
</button>
</div>
</div>
{{else}}
<div id="statistics-dashboard">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button class="btn btn-primary {{overallActive}} col-md-3 col-xs-12" id="overall"
style="width: 100%; padding-left: 5px; border: 1px solid white; border-left: none; font-size: 12px; font-style: italic;">
<img src="/Overall_icon.png" style="height:20px; width: 20px;">
Overall
</button>
</div>
<div class="btn-group">
<button class="btn btn-primary {{teamActive}} col-md-3 col-xs-12" id="team"
style="width:90%; padding-left: 5px; border: 1px solid white; font-size: 12px; font-style: italic;">
<img src="/Team_icon.png" style="height: 20px; width: 20px;">
Team
</button>
</div>
<div class="btn-group">
<button class="btn btn-primary {{resolutionActive}} col-md-3 col-xs-12" id="resolution"
style="width: 125%; padding-left: 5px; margin-left: -10px; border: 1px solid white; font-size: 12px; font-style: italic;">
<img src="/Resolution_icon.png" style="height:20px; width:20px;">
Resolution
</button>
</div>
<div class="btn-group">
<button class="btn btn-primary {{shiftActive}} col-md-3 col-xs-12" id="shift"
style="width: 90%; padding-left: 5px; margin-left: 10px; border: 1px solid white; border-right: none; font-size: 12px; font-style: italic;">
<img src="/Shifts_icon.png" style="height:20px; width:20px;">
Shift
</button>
</div>
</div>
</div>
{{/if}}
</div>
{{#if overallActive}}
<div class="panel-body">
<div id="total-tickets">
{{> totalTickets}}
</div>
<div id="active-staff">
{{> activeStaff}}
</div>
</div>
{{/if}}
{{#if resolutionActive}}
<div class="panel-body">
<div id="tickets-graph">
{{> ticketsGraph}}
</div>
</div>
{{/if}}
{{#if shiftActive}}
<div class="panel-body">
{{> shiftStatistics }}
</div>
{{/if}}
{{#if teamActive}}
<div class="panel-body">
<div id="comment-stats">
{{> commentStats}}
</div>
<div id="department-stats">
{{> departmentStats}}
</div>
</div>
{{/if}}
</div>
</template>
Let me know if there is anything else I can provide to help! Can add the JS files if necessary. Any help would be much appreciated!