fix: show fallbacks on idle and loading

launchdarkly · Jan 10, 2025 · 369df3f · 369df3f
1 parent 2950d1b
commit 369df3f
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 6 deletions.
diff --git a/packages/components/__tests__/Avatar.spec.tsx b/packages/components/__tests__/Avatar.spec.tsx
@@ -40,8 +40,8 @@ describe('Avatar', () => {
 	});
 
 	it('renders', async () => {
-		render(<Avatar src="https://avatars.githubusercontent.com/u/2147624?v=4" />);
-		expect(await screen.findByRole('img')).toBeVisible();
+		render(<Avatar src="https://avatars.githubusercontent.com/u/2147624?v=4" alt="engineer" />);
+		expect(await screen.findByRole('img', { name: 'engineer' })).toBeVisible();
 	});
 
 	it('renders icon on error', async () => {

diff --git a/packages/components/src/Avatar.tsx b/packages/components/src/Avatar.tsx
@@ -48,7 +48,7 @@ interface InitialsAvatarProps extends SVGAttributes<SVGElement>, AvatarVariants
 const Avatar = ({ className, children, size = 'medium', ref, src, ...props }: AvatarProps) => {
 	const status = useImageLoadingStatus(src);
 
-	if (status === 'error') {
+	if (status !== 'loaded') {
 		return children ? (
 			<InitialsAvatar size={size}>{children}</InitialsAvatar>
 		) : (
@@ -57,9 +57,7 @@ const Avatar = ({ className, children, size = 'medium', ref, src, ...props }: Av
 	}
 
 	// biome-ignore lint/a11y/useAltText: <explanation>
-	return status === 'loaded' ? (
-		<img ref={ref} src={src} {...props} className={avatar({ size, className })} />
-	) : null;
+	return <img ref={ref} src={src} {...props} className={avatar({ size, className })} />;
 };
 
 const IconAvatar = ({ className, size = 'medium', name = 'person', ...props }: IconAvatarProps) => {