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/app/(agent)/agent/network/component/ConnectionCard.tsx
View File

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

10
src/app/(agent)/agent/network/component/InvitationCard.tsx
View File

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