Refactor UserAvatar component to simplify image handling and remove error state management

This commit is contained in:
Jose Selesan
2026-05-22 11:58:25 -03:00
parent 91125e82f5
commit 8acb81e6b4

View File

@@ -1,5 +1,4 @@
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { useEffect, useState } from 'react';
type UserAvatarProps = { type UserAvatarProps = {
src?: string | null; src?: string | null;
@@ -22,25 +21,9 @@ export function UserAvatar({
size = 'default', size = 'default',
className, className,
}: UserAvatarProps) { }: UserAvatarProps) {
const [imageError, setImageError] = useState(false);
useEffect(() => {
setImageError(false);
}, [src]);
const canShowImage = Boolean(src) && !imageError;
return ( return (
<Avatar size={size} className={className}> <Avatar size={size} className={className}>
{canShowImage && ( <AvatarImage src={src ?? undefined} alt={alt} />
<AvatarImage
src={src ?? undefined}
alt={alt}
onError={() => {
setImageError(true);
}}
/>
)}
<AvatarFallback>{getInitials(fallbackText)}</AvatarFallback> <AvatarFallback>{getInitials(fallbackText)}</AvatarFallback>
</Avatar> </Avatar>
); );