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

refactor: enhance UserAvatar component with improved image source handling and error state management

Browse source
This commit is contained in:
Danny Avila 2025-10-31 13:05:32 -04:00
parent c63f2a634c
commit e9ef26ddd5
No known key found for this signature in database
GPG key ID: BF31EEB2C5CA0956
1 changed files with 6 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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]);