+1

src/components/account-block.jsx

reviewed

··· 109 109 <div class="avatar-container"> 110 110 <Avatar 111 111 url={useAvatarStatic ? avatarStatic : avatar || avatarStatic} 112 112 + staticUrl={useAvatarStatic ? undefined : avatarStatic} 112 113 size={avatarSize} 113 114 squircle={bot} 114 115 />

+6 -3

src/components/avatar.jsx

reviewed

··· 25 25 26 26 const MISSING_IMAGE_PATH_REGEX = /missing\.png$/; 27 27 28 28 - function Avatar({ url, size, alt = '', squircle, ...props }) { 28 28 + function Avatar({ url, staticUrl, size, alt = '', squircle, ...props }) { 29 29 size = SIZES[size] || size || SIZES.m; 30 30 const avatarRef = useRef(); 31 31 const isMissing = MISSING_IMAGE_PATH_REGEX.test(url); 32 32 return ( 33 33 - <span 33 33 + <picture 34 34 ref={avatarRef} 35 35 class={`avatar ${squircle ? 'squircle' : ''} ${ 36 36 alphaCache[url] ? 'has-alpha' : '' ··· 42 42 title={alt} 43 43 {...props} 44 44 > 45 45 + {!!staticUrl && ( 46 46 + <source srcset={staticUrl} media="(prefers-reduced-motion: reduce)" /> 47 47 + )} 45 48 {!!url && ( 46 49 <img 47 50 src={url} ··· 95 98 }} 96 99 /> 97 100 )} 98 98 - </span> 101 101 + </picture> 99 102 ); 100 103 } 101 104