How to show loading until data coming from subscriptions

Hi Everyone,

I need to show loading while the my page is getting data from subscriptions.
I have used iron-router waitOn method but its not working as expected there are still some cases in which it displays the page but there is still data comes from the subscriptions.

Also, here is the code which I used in HTML Blaze Pages for rendering

     <div class="row">
                            {{#with fetch_where_user_is_member_or_admin}}
                              {{#if this.length}} 
                            {{#each fetch_where_user_is_member_or_admin}}
                            <div class="col l4 m6 s12">
                              <span id="show_group_details" class="go_inside_group" >
                              <div class="card" style="padding-top: 0;">
                                <div class="card-image">
                                  <img src={{Show_grp_image}} class="image_banner_all pointer">
                                </div>
                                <div class="card-content" style="padding-bottom: 0px !important;"> 
                                   <p class="card-title event_name pointer">{{grp_title}} </p>
                                </div>
                                 <p class="pull-left event_type col m12 s12 l12">{{grp_type}} <span class="pull-right btn_status_grp" href="#">{{group_join_status}} </span></p>
                                </div>
                            </span>
                            </div>
                            {{else}}
                            <div class="row">
                           <div class="col m12 s12 l12">
                              <p  class="noreq_screen none_listing"> Loading</p>
                           </div>
                        </div>
                        {{/each}}
                           {{else}}
                              <div class="row">
                                <div class="col m12 s12 l12">
                              <p  class="noreq_screen none_listing"> No Groups Found</p>
                           </div>
                        </div>
                        {{/if}}
                {{/with}}                
                         
                      </div>

I have also tried with #with but still its not showing loading, I don’t know where I am going wrong, Please help. Any help would be greatly appreciated.

1 Like

Haven’t used iron-router, but for what it’s worth, subscriptions have a .ready() function that returns a boolean determined by it’s loading state.

From the Blaze docs:

Inside the template’s HTML, you can use the built-in helper Template.subscriptionsReady , which is an easy pattern for showing loading indicators in your templates when they depend on data loaded from subscriptions.

Example:

<template name="notifications">
  {{#if Template.subscriptionsReady}}
    <!-- This is displayed when all data is ready. -->
    {{#each notifications}}
      {{> notification}}
    {{/each}}
  {{else}}
    Loading...
  {{/if}}
</template>
1 Like

@robfallows, Does the waitOn is not doing the same thing internally?

1 Like

It should, but Iron Router is far from perfect and can introduce many issues by trying to do too much with reactivity, which is one reason it’s fallen out of favour. Even if you don’t want to switch to, say, FlowRouter, it’s probably good practice to adopt some of the conventions there. That means moving reactivity (e.g. subscriptions) closer to where they’re needed (in the templates).

You should also remember that even though the subscription may become ready, further data (and their “readies”) may still continue for as long as the subscription is active (new docs being added to Mongo, for example). Your templates and code should expect this and handle it gracefully. Mostly, Meteor looks after that for you - but “spinner management” in that scenario may be tricky.