Animations or events to hide default images

blaze
1

I have a number of places in my app that does something like this:

{{#if profilePhotoLink }}
      <img class="rounded-circle mr-2" src="{{ profilePhotoLink }}" alt="{{person.firstName}} {{person.lastName}}">
     {{else }}
      <img class="rounded-circle mr-2" src="/images/default_profile.png" alt="{{person.firstName}} {{person.lastName}}" data-toggle="tooltip" data-placement="left" title="{{person.firstName}} {{person.lastName}}">
    {{/if}}

It works, but I often get flashes of the default images until the helper function that delivers the profile image link is ready.

How should I combat issue like that in general? Is there a builtin loading animation in blaze? I do have the meteor velocity package installed…is that a common use for it?

thanks,
Cliff

2

The best solution here is to track ready state and only display the image when the data has loaded. That will save you the flash of default icon.

You might need to add your own user publication so that you can subscribe to it and get all the subscription ready helpers.
Then in your onCreated you can subscribe:

Template.foo.onCreated(function() {
  this.subscribe('userProfiles')
});

And in your template check if the subscription is ready:

{{#if Template.subscriptionsReady }}
    {{#if profilePhotoLink }}
      <img class="rounded-circle mr-2" src="{{ profilePhotoLink }}" alt="{{person.firstName}} {{person.lastName}}">
     {{else }}
      <img class="rounded-circle mr-2" src="/images/default_profile.png" alt="{{person.firstName}} {{person.lastName}}" data-toggle="tooltip" data-placement="left" title="{{person.firstName}} {{person.lastName}}">
    {{/if}}
{{/if}}

Which is normally easiest to apply at the top level of the template before anything shows

1 Like