diff --git a/src/lib/SideBars/Sidebar.svelte b/src/lib/SideBars/Sidebar.svelte
index 061eeaa2..d5c85b1f 100644
--- a/src/lib/SideBars/Sidebar.svelte
+++ b/src/lib/SideBars/Sidebar.svelte
@@ -118,11 +118,7 @@
             }}
             tabindex="0"
           >
-            {#await getCharImage($DataBase.characters[i].image, "plain") then img}
-              <SidebarAvatar src={img} size="56" />
-            {:catch}
-              <SidebarAvatar size="56" src="https://via.placeholder.com/150" />
-            {/await}
+            <SidebarAvatar src={getCharImage($DataBase.characters[i].image, "plain")} size="56" />
           </div>
         {:else}
           <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
diff --git a/src/lib/SideBars/SidebarAvatar.svelte b/src/lib/SideBars/SidebarAvatar.svelte
index ad43edbb..8d133654 100644
--- a/src/lib/SideBars/SidebarAvatar.svelte
+++ b/src/lib/SideBars/SidebarAvatar.svelte
@@ -1,18 +1,27 @@
-<script>
-  export let src;
+<script lang="ts">
+  export let src:string|Promise<string>;
   export let size = "22";
 </script>
 
 <span class="flex shrink-0 items-center justify-center">
   {#if src}
-    <img
-      {src}
-      class="bg-skin-border sidebar-avatar rounded-md object-cover object-top"
-      style:width={size + "px"}
-      style:height={size + "px"}
-      style:minWidth={size + "px"}
-      alt="avatar"
-    />
+    {#await src}
+      <div
+        class="bg-skin-border sidebar-avatar rounded-md bg-top"
+        style:width={size + "px"}
+        style:height={size + "px"}
+        style:minWidth={size + "px"}
+      />
+    {:then img}
+      <img
+        src={img}
+        class="bg-skin-border sidebar-avatar rounded-md object-cover object-top"
+        style:width={size + "px"}
+        style:height={size + "px"}
+        style:minWidth={size + "px"}
+        alt="avatar"
+      />
+    {/await}
   {:else}
     <div
       class="bg-skin-border sidebar-avatar rounded-md bg-top"