renderResource not working when it contains an api call

I have an issue when calling an api in the renderResource function like this :

  self.renderResource = function (resource) {
  if (resource.id === 'mbsc-def') {
    return '';
  }

  self.client.getUserAvatarUrl(resource.id).then((avatarUrl) => {
    console.log(avatarUrl);
    html = `
<div class="inline-flex items-center">
<img class="h-8 w-8 rounded-full"
         src="${avatarUrl}"
         alt="${resource.name}"
         title="${resource.name}"/></div>`;
    console.log(html)
    return html;
  }).catch(error => {
    throw error;
  });
}

I can see in the logs, that the api call went fine, the html is well formatted, but it is not displayed.

If I do a return before the api call

return "<div>DUMMY DATA</div>"

this is working. Is there something special to do to fix this ?

Hi @Julien,

The renderResource must be a synchronous function to return the template.