Feature to enable loading of the Initials first.

[whizkidwwe1217]

When network is not very fast, the image don't load immediately and the avatar appears blank. Should have a feature that will load the Initials by default and then replace by the src or other sources when loading is complete.

[HaithemMosbahi]

I will consider this feature in the next release

[sarfarazansari]

@HaithemMosbahi do you have any plan to fix. let me know will do it.

[odahcam]

Seems like we'r checking for the image avatar before setting the text one: https://github.com/HaithemMosbahi/ngx-avatar/blob/d441ce9d38501a136591059d1b87000b3fc434a1/projects/ngx-avatar/src/lib/avatar.component.ts#L172-L182

and double-checking it in the template: https://github.com/HaithemMosbahi/ngx-avatar/blob/d441ce9d38501a136591059d1b87000b3fc434a1/projects/ngx-avatar/src/lib/avatar.component.ts#L46

Maybe we could just set the initials on component construct and let the template-check choose between the text or image by availability. Is it possible @HaithemMosbahi ?

[HaithemMosbahi]

Yes we could configure the component to set the initials first. As I'm sure you know the avatar logic is based on the source priority ( facebook, twitter, initials, etc ), at the moment, source priority is hard coded as it's shown here :

https://github.com/HaithemMosbahi/ngx-avatar/blob/d441ce9d38501a136591059d1b87000b3fc434a1/projects/ngx-avatar/src/lib/avatar.service.ts#L10-L21

The solution that I have been thinking about is to give the user the ability to override the source priority , in our case the source priority would be initials then custom image. we could use the configuration object which is optionally passed by the user to the AvatarModule.

https://github.com/HaithemMosbahi/ngx-avatar/blob/d441ce9d38501a136591059d1b87000b3fc434a1/src/app/app.module.ts#L16-L18

However, we still need to adjust to avatar logic code, because the fallback system work as follows : goes through the sources that were provided as input and order them based on source priority, Then the component would try to load the avatar from the first source, if it fails it goes to the next source, if it succeeds, the avatar is shown and that's it. In our case we need to tell the algorithm to continue loading next source even when the first avatar source ( it could be initials ) has been loaded successfully.

What do you think ?

[whizkidwwe1217]

@HaithemMosbahi That will work for me. There should be a config that allows us to set the initial source that has the fastest load time (e.g. INITIALS, CUSTOM or VALUE). The component will initially load the initial source that was configured and then will try to load the sources in sequence. If one of the sources succeeds, then that's the only time the avatar will be replaced.

[odahcam]

This could be related with #23.