From d05a426d00fa70823cbef665cd4ec8c44eff1185 Mon Sep 17 00:00:00 2001
From: ajbura <ajbura@gmail.com>
Date: Sat, 5 Feb 2022 18:19:30 +0530
Subject: [PATCH] Fix avatar showing av when loading (#247)

Signed-off-by: ajbura <ajbura@gmail.com>
---
 src/app/atoms/avatar/Avatar.jsx  | 10 +++++++++-
 src/app/atoms/avatar/Avatar.scss |  1 +
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/app/atoms/avatar/Avatar.jsx b/src/app/atoms/avatar/Avatar.jsx
index e5ce53c..891637c 100644
--- a/src/app/atoms/avatar/Avatar.jsx
+++ b/src/app/atoms/avatar/Avatar.jsx
@@ -21,7 +21,15 @@ function Avatar({
     <div className={`avatar-container avatar-container__${size} noselect`}>
       {
         imageSrc !== null
-          ? <img draggable="false" src={imageSrc} onError={(e) => { e.target.src = ImageBrokenSVG; }} alt="avatar" />
+          ? (
+            <img
+              draggable="false"
+              src={imageSrc}
+              onLoad={(e) => { e.target.style.backgroundColor = 'transparent'; }}
+              onError={(e) => { e.target.src = ImageBrokenSVG; }}
+              alt=""
+            />
+          )
           : (
             <span
               style={{ backgroundColor: iconSrc === null ? bgColor : 'transparent' }}
diff --git a/src/app/atoms/avatar/Avatar.scss b/src/app/atoms/avatar/Avatar.scss
index 3c10fe9..ea69c9e 100644
--- a/src/app/atoms/avatar/Avatar.scss
+++ b/src/app/atoms/avatar/Avatar.scss
@@ -31,6 +31,7 @@
     height: 100%;
     object-fit: cover;
     border-radius: inherit;
+    background-color: var(--bg-surface-hover);
   }
 
   .avatar__border {