Re-Quest/frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement shimmer loading for profile and avatar images across various components.

Browse Source
This commit is contained in:
pradeepkumar
2026-03-14 14:37:19 +05:30
parent 7b5c670159
commit 9acb0063fa
10 changed files with 83 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/message/ChatHeader.tsx
View File

@@ -124,19 +124,13 @@ export function ChatHeader({
<div className="relative flex-shrink-0">
<div className="w-[50px] h-[50px] rounded-full overflow-hidden border border-[#00293D]/20 relative">
{(!avatar || !avatarLoaded || isPlaceholderAvatar) && (
<Image
src={placeholder}
alt={name}
width={50}
height={50}
className="absolute inset-0 w-full h-full object-cover"
/>
<div className="absolute inset-0 rounded-full shimmer-loading" />
)}
{avatar && !isPlaceholderAvatar && (
<img
src={avatar}
alt={name}
className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-200 ${avatarLoaded ? 'opacity-100' : 'opacity-0'}`}
className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-300 ${avatarLoaded ? 'opacity-100' : 'opacity-0'}`}
onLoad={() => setAvatarLoaded(true)}
/>
)}

16
src/components/message/MessagingPage.tsx
View File

@@ -80,7 +80,7 @@ function formatLastSeen(lastSeenAt: string | null | undefined, isOnline: boolean
return `Last seen ${diffDays}d ago`;
}
// Avatar component with placeholder-until-loaded pattern
// Avatar component with shimmer loading animation
function AvatarWithPlaceholder({ src, alt, size }: { src: string; alt: string; size: number }) {
const [loaded, setLoaded] = useState(false);
const placeholder = '/assets/icons/user-placeholder-icon.svg';
@@ -89,19 +89,13 @@ function AvatarWithPlaceholder({ src, alt, size }: { src: string; alt: string; s
return (
<>
{(!src || !loaded) && (
<Image
src={placeholder}
alt={alt}
width={size}
height={size}
className="absolute inset-0 w-full h-full object-cover"
/>
<div className="absolute inset-0 rounded-full shimmer-loading" />
)}
{src && !isPlaceholder && (
<img
src={src}
alt={alt}
className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-200 ${loaded ? 'opacity-100' : 'opacity-0'}`}
className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-300 ${loaded ? 'opacity-100' : 'opacity-0'}`}
onLoad={() => setLoaded(true)}
/>
)}
@@ -792,8 +786,8 @@ export function MessagingPage() {
onClick={() => window.open(messageFileUrls[message.id], '_blank')}
/>
) : (
<div className="w-[200px] h-[150px] rounded-[12px] bg-black/5 flex items-center justify-center">
<div className="animate-spin rounded-full h-6 w-6 border-b-2 border-[#00293d]" />
<div className="w-[200px] h-[150px] rounded-[12px] overflow-hidden">
<div className="w-full h-full shimmer-loading rounded-[12px]" />
</div>
)
) : message.messageType === 'FILE' ? (