Add a fallback to profile picture

Sometimes, Google returns other http status than 200,
so we need to fallback to show the initials

lib/livebook_web/components/user_components.ex

@@ -15,31 +15,40 @@ defmodule LivebookWeb.UserComponents do
 
   def user_avatar(%{user: %{avatar_url: nil}} = assigns) do
     ~H"""
-    <div
+    <.avatar_text class={@class} user={@user} text_class={@text_class} />
+    """
+  end
+
+  def user_avatar(assigns) do
+    ~H"""
+    <object
+      data={@user.avatar_url}
+      type="image/png"
       class={["rounded-full flex items-center justify-center", @class]}
-      style={"background-color: #{@user.hex_color}"}
       aria-hidden="true"
     >
-      <div class={["text-gray-100 font-semibold", @text_class]}>
-        {avatar_text(@user.name)}
-      </div>
-    </div>
+      <.avatar_text class={@class} user={@user} text_class={@text_class} />
+    </object>
     """
   end
 
-  def user_avatar(assigns) do
+  defp avatar_text(assigns) do
     ~H"""
-    <img
-      src={@user.avatar_url}
+    <div
       class={["rounded-full flex items-center justify-center", @class]}
+      style={"background-color: #{@user.hex_color}"}
       aria-hidden="true"
-    />
+    >
+      <div class={["text-gray-100 font-semibold", @text_class]}>
+        {initials(@user.name)}
+      </div>
+    </div>
     """
   end
 
-  defp avatar_text(nil), do: "?"
+  defp initials(nil), do: "?"
 
-  defp avatar_text(name) do
+  defp initials(name) do
     name
     |> String.split()
     |> Enum.map(&String.at(&1, 0))