Handle loading sequence of template

blaze
1

Hello to all,

I have problem with Blaze loading sequence. I have the following code and the “unauthorized” template will still show for a moment (flash and gone in split second) even I login the with correct user role OR after login and I refresh the browser.

<body>
    {{#if currentUser}}
        {{#if isInRole 'admin'}}
            <div class="ui container">
                {{> topBar}}
                {{> adminMain}}
            </div>
        {{else}}
            {{> unauthorized}}
        {{/if}}
    {{else}}
        {{> loginScreen}}
    {{/if}}
</body>

I tried rearrange the IF sequence but the “unauthorized” template will still flash up for a split second before the correct template loaded.

How to I prevent this totally? Please advice, thank you.

Thank you.

Regards,

2

It’s likely because data is being downloaded, so the template reacts to currently available information and refreshes as new information comes in.

How about something like this:

<body>
    {{#if currentUser}}
        {{#if isInRole 'admin'}}
            <div class="ui container">
                {{> topBar}}
                {{> adminMain}}
            </div>
        {{else}}
           {{#if isInRole 'user'}}
              {{> unauthorized}}
           {{else}}
               Please wait ... loading
           {{/if}}
        {{/if}}
    {{else}}
        {{> loginScreen}}
    {{/if}}
</body>
3

There’s an intermediata step between loggedIn and not loggedIn, which is loggingIn and there also is a built-in helper {{loggingIn}} for that as well!

So you should place another if/unless block in your template to handle this case and the flashing will indeed disappear.

1 Like
4

Thanks for the advice.

5

Thanks for pointing that out. Sorry I missed that.

6

Hi,

I changed my code to as below but if I refresh the browser (after login and at adminMain), the “unauthorized” still flash up.

<body>
    {{#if loggingIn}}
        Loading... Please wait.
    {{else}}
        {{#if currentUser}}
            {{#if isInRole 'admin'}}
                <div class="ui container">
                    {{> topBar}}
                    {{> adminMain}}
                </div>
            {{else}}
                {{> unauthorized}}
            {{/if}}
        {{else}}
            {{> loginScreen}}
        {{/if}}
    {{/if}}
</body>

Please advice, thank you.

7

Ah, sorry, I was on mobile and missed the fact that you also have some role helper in there.

<body>
  {{#if currentUser}}
    {{> loggedIn}}
  {{else}}
    {{#if loggingIn}}
        {{> loading}}
      {{else}}
        {{> loginScreen}}
    {{/if}}
  {{/if}}
</body>

<template name="loggedId">
  {{#if Template.subscriptionsReady}}
    {{#if isInRole 'admin'}}
      <div class="ui container">
        {{> topBar}}
        {{> adminMain}}
      </div>
    {{else}}
      {{> unauthorized}}
    {{/if}}
  {{else}}
    {{> loading}}
  {{/if}}
</template>

and in your javascript file, make sure you have subscribed to the publication that sends down role information

Template.loggedIn.onCreated(function() {
  this.subscribe('whatever-publication-you-need-for-roles-information')
})
8

Thanks so much. I’ll test this out.

1 Like
9

Another pattern I’ve grown fond of:

MyTemplate.onCreated(function () {

  const self = this;

  // Set the "ready" state of the template
  self.readyVar: new ReactiveVar(false);

  // Update the state when your subscription, currentUser, etc is ready
  self.autorun(function() {
    if (theThingYouNeed === 'ready') {
      self.readyVar.set(true);
    }
  });

});

MyTemplate.helpers({
  ready () {
    return this.readyVar.get();
  }
});

<template name="myTemplate">
  {{#if ready}}
    <!-- all of your content -->
  {{/if}}
</template>
10

Thanks and Happy New Year to all of you great people here.