CODEWITHSUNDEEP
meteor
Tarlen
Tarlen

Reputation: 3797

Show loading indicator on partial template

I have the following template

<template name="myTabs">
  <div class="my-tabs">
    <div class="page-header">
      <h1>My Tabs</h1>
    </div>

    <form class="navbar-form navbar-left" role="search">
      <a href="{{pathFor 'newTab'}}" class="btn btn-default">New</a>
      <div class="form-group">
        <input type="text"
          name="tab"
          class="form-control typeahead"
          autocomplete="off" spellcheck="off"
          data-source="tabs"
          data-template="tabSearch"
          placeholder="Filter"/>
      </div>
    </form>

    {{>tabsTable}}
  </div>
</template>

And the following nested template

<template name='tabsTable'>
  <table class="table table-hover">
   ... table that displays data from collection
  </table>
</template>

And the following route

this.route('myTabs', {
    path: '/mytabs',
    layoutTemplate: 'dashboardLayout',
    loginRequired: 'entrySignIn',
    waitOn: function() {
      return this.subscribe("mytabs", Meteor.userId());
    },
    data: {
      tabs: Tabs.find({})
    },
    onAfterAction: function() {
      SEO.set({
        title: 'My Tabs | ' + SEO.settings.title
      });
    }
  });

Problem is that when i visit the myTabs route, the whole template is replaced by the loading template, instead of just the part that depends on the collection being loaded, namely the tabsTable template.

How can I make it so that the loading template is only displayed on the nested template, so that all the html that doesnt depend on the collection being loaded is still shown (title, wrapping html etc..)?

Upvotes: 1

Views: 184

Answers (1)

azium
azium

Reputation: 20614

Instead of using waitOn with a loadingTemplate in the router, you can use subscriptions which will give you a ready calllback which you can use to hide the loading template in your view.

Router.route('myTabs', {
path: '/mytabs',
layoutTemplate: 'dashboardLayout',
loginRequired: 'entrySignIn',
subscriptions: function() {
  this.subs = Meteor.subscribe("mytabs", Meteor.userId());
},
data: function() {
  return {
    tabs: Tabs.find(),
    ready: this.subs.ready
  };
},
onAfterAction: function() {
  SEO.set({
    title: 'My Tabs | ' + SEO.settings.title
  });
}

});

Then in your view

<template name="myTabs">
  <div class="my-tabs">

    <!-- ... -->

    {{#unless ready}}
       {{> loadingTemplate}}
    {{else}}
       {{> tabsTable}}
    {{/unless}}

  </div>
</template>

Upvotes: 1

Related Questions