From e9ef26ddd57d472ae1650694cd85859876bb3cab Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Fri, 31 Oct 2025 13:05:32 -0400
Subject: [PATCH] refactor: enhance UserAvatar component with improved image
 source handling and error state management

---
 client/src/components/Endpoints/Icon.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Endpoints/Icon.tsx b/client/src/components/Endpoints/Icon.tsx
index 482915db38..9b087c4705 100644
--- a/client/src/components/Endpoints/Icon.tsx
+++ b/client/src/components/Endpoints/Icon.tsx
@@ -1,4 +1,4 @@
-import React, { memo, useState, useMemo, useRef, useCallback } from 'react';
+import React, { memo, useState, useMemo, useRef, useCallback, useEffect } from 'react';
 import { UserIcon, useAvatar } from '@librechat/client';
 import type { TUser } from 'librechat-data-provider';
 import type { IconProps } from '~/common';
@@ -37,15 +37,14 @@ DefaultAvatar.displayName = 'DefaultAvatar';
 const UserAvatar = memo(({ size, user, avatarSrc, username, className }: UserAvatarProps) => {
   const [imageError, setImageError] = useState(false);
   const imageLoadedRef = useRef(false);
-  const currentSrcRef = useRef('');
 
   const imageSrc = useMemo(() => (user?.avatar ?? '') || avatarSrc, [user?.avatar, avatarSrc]);
 
-  /** Reset loaded state if image source changes */
-  if (currentSrcRef.current !== imageSrc) {
+  /** Reset loaded state and error state if image source changes */
+  useEffect(() => {
     imageLoadedRef.current = false;
-    currentSrcRef.current = imageSrc;
-  }
+    setImageError(false);
+  }, [imageSrc]);
 
   const handleImageError = useCallback(() => {
     setImageError(true);
@@ -54,6 +53,7 @@ const UserAvatar = memo(({ size, user, avatarSrc, username, className }: UserAva
 
   const handleImageLoad = useCallback(() => {
     imageLoadedRef.current = true;
+    setImageError(false);
   }, []);
 
   const hasAvatar = useMemo(() => imageSrc !== '', [imageSrc]);