Use `converse-avatar` and fix bug...

where avatar didn't show in 1:1 chat heading (due to a race condition)

src/headless/plugins/vcard.js

@@ -181,6 +181,7 @@ converse.plugins.add('converse-vcard', {
                 model.vcard = _converse.vcards.create({'jid': jid});
             }
             model.vcard.on('change', () => model.trigger('vcard:change'));
+            model.trigger('vcard:add');
         }
 
 

src/plugins/chatview/heading.js

@@ -12,6 +12,7 @@ export default class ChatHeading extends CustomElement {
     initialize () {
         this.model = _converse.chatboxes.get(this.getAttribute('jid'));
         this.listenTo(this.model, 'change:status', this.requestUpdate);
+        this.listenTo(this.model, 'vcard:add', this.requestUpdate);
         this.listenTo(this.model, 'vcard:change', this.requestUpdate);
         if (this.model.contact) {
             this.listenTo(this.model.contact, 'destroy', this.requestUpdate);

src/plugins/chatview/templates/chat-head.js

@@ -2,7 +2,6 @@ import { __ } from 'i18n';
 import { _converse } from '@converse/headless/core';
 import { getHeadingDropdownItem, getHeadingStandaloneButton } from 'plugins/chatview/utils.js';
 import { html } from "lit";
-import { renderAvatar } from 'shared/directives/avatar.js';
 import { until } from 'lit/directives/until.js';
 
 
@@ -19,19 +18,8 @@ async function getDropdownButtons (promise) {
 }
 
 export default (o) => {
-    const vcard = o.model?.vcard;
-    const vcard_json = vcard ? vcard.toJSON() : {};
     const i18n_profile = __("The User's Profile Image");
-    const avatar_data = Object.assign(
-        {
-            'alt_text': i18n_profile,
-            'extra_classes': '',
-            'height': 40,
-            'width': 40
-        },
-        vcard_json
-    );
-    const avatar = html`<span class="mr-2">${renderAvatar(avatar_data)}</span>`;
+    const avatar = html`<span title="${i18n_profile}"><converse-avatar class="avatar chat-msg__avatar" .model=${o.model.vcard} height="40" width="40"></converse-avatar></span>`;
     const display_name = o.model.getDisplayName();
 
     const tpl_dropdown_btns = () => getDropdownButtons(o.heading_buttons_promise)