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

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