DEV Community

Dung Nguyen
Dung Nguyen

Posted on

SaladUI - Implement avatar component for Phoenix LiveView

This post is written after I implement Avatar component for SaladUI component library for Phoenix Liveview.

An avatar component is quite simple, but I want to enhance it with fallback avatar text. The template structure is as following:



<.avatar>
  <.avatar_image src="./my-profile-img.jpg"></.avatar_image>
  <.avatar_fallback class="bg-primary text-white">CN</.avatar_fallback>
<.avatar>


Enter fullscreen mode Exit fullscreen mode

Here is an implementation of avatar component in html



<span class="relative rounded-full overflow-hidden w-10 h-10">
    <img class="aspect-square w-full h-full" src="https://github.com/shadcn.png">
    <span class="flex rounded-full bg-primary text-white items-center justify-center w-full h-full">CN</span>
</span>


Enter fullscreen mode Exit fullscreen mode

Image description

It's the happy case, the image exist, and the fallback element is push down and hidden due to class overflow-hidden.

But when the image doesn't exist, the broken image is displayed.

Image description

Hmm, the image should be hidden if it does not exist or got error while loading. Fortunately, img provide onerror event.



<span class="relative rounded-full overflow-hidden w-10 h-10">
    <img class="aspect-square w-full h-full" src="badimage.png" onerror="this.style.display='none'">
    <span class="flex rounded-full bg-primary text-white items-center justify-center w-full h-full">CN</span>
</span>


Enter fullscreen mode Exit fullscreen mode

Guest what. Nothing changed, the broken image is still visible.
It took me a while to discover the reason. onerror="this.style.display='none'" change attribute on client side, when Phoenix LiveView update, it patch the html and remove the display style value. So just add phx-update="ignore" and you got the error image hidden.



<span class="relative rounded-full overflow-hidden w-10 h-10">
    <img class="aspect-square w-full h-full" src="https://github.com/shadcn.png" onerror="this.style.display='none'" phx-update="ignore">
    <span class="flex rounded-full bg-primary text-white items-center justify-center w-full h-full">CN</span>
</span>


Enter fullscreen mode Exit fullscreen mode

And it works as expected

Image description

Now wrap up the component



defmodule SaladUI.Avatar do
  @moduledoc false
  use Phoenix.Component

  attr(:class, :string, default: nil)
  attr(:rest, :global)

  def avatar(assigns) do
    ~H"""
    <span class={classes(["relative h-10 w-10 overflow-hidden rounded-full", @class])} {@rest}>
      <%= render_slot(@inner_block) %>
    </span>
    """
  end

  attr(:class, :string, default: nil)
  attr(:rest, :global)

  def avatar_image(assigns) do
    ~H"""
    <img
      class={classes(["aspect-square h-full w-full", @class])}
      {@rest}
      phx-update="ignore"
      style="display:none"
      onload="this.style.display=''"
    />
    """
  end

  attr(:class, :string, default: nil)
  attr(:rest, :global)
  slot(:inner_block, required: false)

  def avatar_fallback(assigns) do
    ~H"""
    <span
      class={
        classes(["flex h-full w-full items-center justify-center rounded-full bg-muted", @class])
      }
      {@rest}
    >
      <%= render_slot(@inner_block) %>
    </span>
    """
  end
end


Enter fullscreen mode Exit fullscreen mode

You may notice that I use onload event instead of onerror:



style="display:none"
onload="this.style.display=''"


Enter fullscreen mode Exit fullscreen mode

Using onerror browser waits until the image loading complete to decide if there is any error then trigger the event. This cause the white avatar while loading image. Using onload event to show image when the loading process complete, so by default if the image loading is slow, the fallback avatar still displays.

If you want to learn more, then visit my github repo https://github.com/bluzky/salad_ui.

Thanks for reading.

Top comments (3)

Collapse
 
t0nghe profile image
Tonghe Wang

Hi Dung, thanks for sharing! SaladUI looks amazing.

Collapse
 
bluzky profile image
Dung Nguyen

thank you, I'm trying my best :D

Collapse
 
john_knott_aea214d6666728 profile image
John Knott

Good work on SaladUI.