From 8d4e657af52d72b3df7d8f6b9331a4b890f86f10 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Wed, 15 Jan 2025 11:42:54 -0800
Subject: [PATCH] Tweak avatar again

---
 src/lib/components/Avatar.svelte | 26 ++++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/Avatar.svelte b/src/lib/components/Avatar.svelte
index 92ee272e..fd42b5db 100644
--- a/src/lib/components/Avatar.svelte
+++ b/src/lib/components/Avatar.svelte
@@ -1,18 +1,32 @@
 <script lang="ts">
+  import {onMount} from "svelte"
   import Icon from "@lib/components/Icon.svelte"
 
   export let src = ""
   export let size = 7
   export let icon = "user-rounded"
 
+  let element: HTMLElement
+
   $: rem = size * 4
+
+  onMount(() => {
+    if (src) {
+      const image = new Image()
+
+      image.addEventListener("error", () => {
+        element.querySelector(".hidden")?.classList.remove("hidden")
+      })
+
+      image.src = src
+    }
+  })
 </script>
 
 <div
-  class="{$$props.class} relative !flex shrink-0 items-center justify-center overflow-hidden rounded-full"
-  style="width: {rem}px; height: {rem}px; min-width: {rem}px; {$$props.style || ''}">
-  <Icon {icon} size={Math.round(size * 0.8)} />
-  <div
-    class="absolute left-0 top-0 h-full w-full bg-cover bg-center"
-    style="background-image: url({src})" />
+  bind:this={element}
+  class="{$$props.class} relative !flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-cover bg-center"
+  style="width: {rem}px; height: {rem}px; min-width: {rem}px; background-image: url({src}); {$$props.style ||
+    ''}">
+  <Icon {icon} class={src ? "hidden" : ""} size={Math.round(size * 0.8)} />
 </div>