Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-20 02:10:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

WIP: icon avatar fix

Browse source
This commit is contained in:
Danny Avila 2025-10-26 12:31:44 +01:00
parent e5a5931818
commit 39d83b705b
No known key found for this signature in database
GPG key ID: BF31EEB2C5CA0956
1 changed files with 25 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

41
client/src/components/Endpoints/Icon.tsx
View file

@ -48,11 +48,11 @@ const UserAvatar = memo(({ size, user, avatarSrc, username, className }: UserAva
/** Check if we're using a custom avatar (not initials) */ /** Check if we're using a custom avatar (not initials) */
const isCustomAvatar = useMemo(() => !!(user?.avatar && user.avatar !== ''), [user?.avatar]); const isCustomAvatar = useMemo(() => !!(user?.avatar && user.avatar !== ''), [user?.avatar]);
/** Only show default while loading for custom avatars, not for initials */ // /** Only show default while loading for custom avatars, not for initials */
const showDefaultWhileLoading = useMemo( // const showDefaultWhileLoading = useMemo(
() => isCustomAvatar && !imageLoaded && showImage, // () => isCustomAvatar && !imageLoaded && showImage,
[isCustomAvatar, imageLoaded, showImage], // [isCustomAvatar, imageLoaded, showImage],
); // );
return ( return (
<div <div
@ -63,18 +63,27 @@ const UserAvatar = memo(({ size, user, avatarSrc, username, className }: UserAva
}} }}
className={cn('relative flex items-center justify-center', className ?? '')} className={cn('relative flex items-center justify-center', className ?? '')}
> >
{!showImage || showDefaultWhileLoading ? renderDefaultAvatar() : null} {/* Always render default avatar as background */}
{!showImage && renderDefaultAvatar()}
{showImage && ( {showImage && (
<img <>
style={{ {/* Show default avatar behind the image while loading custom avatars */}
display: imageLoaded || !isCustomAvatar ? 'block' : 'none', {isCustomAvatar && !imageLoaded && (
}} <div className="absolute inset-0 flex items-center justify-center">
className="rounded-full" {renderDefaultAvatar()}
src={imageSrc} </div>
alt="avatar" )}
onLoad={handleImageLoad} <img
onError={handleImageError} className={cn(
/> 'relative z-10 rounded-full',
isCustomAvatar && !imageLoaded ? 'opacity-0' : 'opacity-100',
)}
src={imageSrc}
alt="avatar"
onLoad={handleImageLoad}
onError={handleImageError}
/>
</>
)} )}
</div> </div>
); );