From f0c9a458bb69d9f9e38c95636cac52c8ccd3d662 Mon Sep 17 00:00:00 2001
From: Ajay Bura <ajbura@gmail.com>
Date: Sun, 16 Jan 2022 10:41:37 +0530
Subject: [PATCH] Add broken avatar fallback

Signed-off-by: Ajay Bura <ajbura@gmail.com>
---
 public/res/svg/image-broken.svg | 18 ++++++++++++++++++
 src/app/atoms/avatar/Avatar.jsx |  4 +++-
 2 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 public/res/svg/image-broken.svg

diff --git a/public/res/svg/image-broken.svg b/public/res/svg/image-broken.svg
new file mode 100644
index 00000000..101b8e10
--- /dev/null
+++ b/public/res/svg/image-broken.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<g>
+		<polygon fill="#7F7F7F" points="20,7 20,5 18,5 18,7 16,7 16,5 18,5 18,3 16,3 16,2 3,2 3,22 11,22 11,20 19,12 21,12 21,7 		"/>
+		<polygon fill="#7F7F7F" points="19,16 21,16 21,22 15,22 15,20 19,20 		"/>
+	</g>
+	<polygon fill="#6FBEFF" points="19,9 14,9 14,4 5,4 5,20 11,20 13,20 13,18 15,18 15,16 17,16 17,14 19,14 	"/>
+	<polygon fill="#FFFFFF" points="7,10 12,10 12,8 10,8 10,7 8,7 8,8 7,8 	"/>
+	<g>
+		<rect x="17" y="18" fill="#00C72C" width="2" height="2"/>
+		<polygon fill="#00C72C" points="5,20 5,18 7,18 7,16 9,16 9,14 11,14 11,12 13,12 13,14 15,14 15,18 13,18 13,20 		"/>
+	</g>
+</g>
+</svg>
diff --git a/src/app/atoms/avatar/Avatar.jsx b/src/app/atoms/avatar/Avatar.jsx
index 59097b5c..e5ce53c1 100644
--- a/src/app/atoms/avatar/Avatar.jsx
+++ b/src/app/atoms/avatar/Avatar.jsx
@@ -7,6 +7,8 @@ import { twemojify } from '../../../util/twemojify';
 import Text from '../text/Text';
 import RawIcon from '../system-icons/RawIcon';
 
+import ImageBrokenSVG from '../../../../public/res/svg/image-broken.svg';
+
 function Avatar({
   text, bgColor, iconSrc, iconColor, imageSrc, size,
 }) {
@@ -19,7 +21,7 @@ function Avatar({
     <div className={`avatar-container avatar-container__${size} noselect`}>
       {
         imageSrc !== null
-          ? <img draggable="false" src={imageSrc} alt="avatar" />
+          ? <img draggable="false" src={imageSrc} onError={(e) => { e.target.src = ImageBrokenSVG; }} alt="avatar" />
           : (
             <span
               style={{ backgroundColor: iconSrc === null ? bgColor : 'transparent' }}