From 1a7e298a6fbd4c6a06acdfdca4d815029811178f Mon Sep 17 00:00:00 2001
From: Matt Krick <matt.krick@gmail.com>
Date: Thu, 4 Apr 2024 19:10:10 -0700
Subject: [PATCH] fix: fallback for missing avatar images (#9603)

Signed-off-by: Matt Krick <matt.krick@gmail.com>
---
 packages/client/components/Avatar/Avatar.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/client/components/Avatar/Avatar.tsx b/packages/client/components/Avatar/Avatar.tsx
index 99b6dd0fb29..8b1329a6253 100644
--- a/packages/client/components/Avatar/Avatar.tsx
+++ b/packages/client/components/Avatar/Avatar.tsx
@@ -1,5 +1,5 @@
 import styled from '@emotion/styled'
-import React, {forwardRef} from 'react'
+import React, {forwardRef, useState} from 'react'
 import defaultUserAvatar from '../../styles/theme/images/avatar-user.svg'
 import AvatarBadge from '../AvatarBadge/AvatarBadge'
 
@@ -7,7 +7,7 @@ type ImageBlockProps = Pick<Props, 'sansRadius' | 'sansShadow' | 'picture' | 'si
 
 const ImageBlock = styled('div')<ImageBlockProps>(
   ({sansRadius, sansShadow, picture, size, onClick}) => ({
-    backgroundImage: `url(${picture ?? defaultUserAvatar})`,
+    backgroundImage: `url(${picture})`,
     backgroundPosition: 'center center',
     backgroundRepeat: 'no-repeat',
     backgroundSize: 'cover',
@@ -62,7 +62,10 @@ const Avatar = forwardRef((props: Props, ref: any) => {
     sansShadow,
     size
   } = props
-
+  const [imageUrl, setImageUrl] = useState(picture || defaultUserAvatar)
+  const onError = () => {
+    setImageUrl(defaultUserAvatar)
+  }
   return (
     <ImageBlock
       onTransitionEnd={onTransitionEnd}
@@ -72,9 +75,10 @@ const Avatar = forwardRef((props: Props, ref: any) => {
       onMouseEnter={onMouseEnter}
       sansRadius={sansRadius}
       sansShadow={sansShadow}
-      picture={picture}
+      picture={imageUrl}
       size={size}
     >
+      <img src={imageUrl} className='hidden' onError={onError} />
       {hasBadge && (
         <BadgeBlock>
           <BadgeBlockInner>