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

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 { UserIcon, useAvatar } from '@librechat/client';
import type { TUser } from 'librechat-data-provider'; import type { TUser } from 'librechat-data-provider';
import type { IconProps } from '~/common'; import type { IconProps } from '~/common';
@ -37,15 +37,14 @@ DefaultAvatar.displayName = 'DefaultAvatar';
const UserAvatar = memo(({ size, user, avatarSrc, username, className }: UserAvatarProps) => { const UserAvatar = memo(({ size, user, avatarSrc, username, className }: UserAvatarProps) => {
const [imageError, setImageError] = useState(false); const [imageError, setImageError] = useState(false);
const imageLoadedRef = useRef(false); const imageLoadedRef = useRef(false);
const currentSrcRef = useRef('');
const imageSrc = useMemo(() => (user?.avatar ?? '') || avatarSrc, [user?.avatar, avatarSrc]); const imageSrc = useMemo(() => (user?.avatar ?? '') || avatarSrc, [user?.avatar, avatarSrc]);
/** Reset loaded state if image source changes */ /** Reset loaded state and error state if image source changes */
if (currentSrcRef.current !== imageSrc) { useEffect(() => {
imageLoadedRef.current = false; imageLoadedRef.current = false;
currentSrcRef.current = imageSrc; setImageError(false);
} }, [imageSrc]);
const handleImageError = useCallback(() => { const handleImageError = useCallback(() => {
setImageError(true); setImageError(true);
@ -54,6 +53,7 @@ const UserAvatar = memo(({ size, user, avatarSrc, username, className }: UserAva
const handleImageLoad = useCallback(() => { const handleImageLoad = useCallback(() => {
imageLoadedRef.current = true; imageLoadedRef.current = true;
setImageError(false);
}, []); }, []);
const hasAvatar = useMemo(() => imageSrc !== '', [imageSrc]); const hasAvatar = useMemo(() => imageSrc !== '', [imageSrc]);