Merge branch 'main' into KZN-3415/popover-api

Author: Kitty-Al

.changeset/empty-spies-wear.md

@@ -0,0 +1,5 @@
+---
+'@kaizen/components': patch
+---
+
+Avatar will render img only if it is available and loaded successfully

packages/components/src/Avatar/Avatar.spec.tsx

@@ -14,6 +14,7 @@ describe('<Avatar />', () => {
     fireEvent.error(screen.getByRole('img'))
 
     expect(screen.getByText('JD')).toBeInTheDocument()
+    expect(screen.queryByRole('img')).not.toBeInTheDocument()
   })
 
   describe('full name provided contains more than two names', () => {

packages/components/src/Avatar/Avatar.tsx

@@ -156,13 +156,13 @@ export const Avatar = ({
       )}
       {...restProps}
     >
-      {avatarState !== 'none' && (
+      {avatarState !== 'none' && avatarState !== 'error' && (
         <img
           ref={image}
           className={classnames(
             styles.avatarImage,
             isCompany && styles.companyAvatarImage,
-            (avatarState === 'loading' || avatarState === 'error') && styles.loading,
+            avatarState === 'loading' && styles.loading,
           )}
           src={avatarSrc}
           onError={onImageFailure}