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

22
src/components/layout/CommonHeader.tsx
View File

@@ -203,20 +203,13 @@ export function CommonHeader() {
{/* Avatar */}
<div className="w-[32px] h-[32px] md:w-[35px] md:h-[35px] rounded-full overflow-hidden border-2 border-[#e58625] bg-gray-100 flex-shrink-0 relative">
{(!userImage || !avatarLoaded) && (
<Image
src="/assets/icons/user-placeholder-icon.svg"
alt="Profile"
width={35}
height={35}
className="absolute inset-0 object-cover"
style={{ width: '100%', height: '100%' }}
/>
<div className="absolute inset-0 rounded-full shimmer-loading" />
)}
{userImage && (
<img
src={userImage}
alt="Profile"
className={`w-full h-full object-cover ${avatarLoaded ? 'opacity-100' : 'opacity-0'}`}
className={`w-full h-full object-cover transition-opacity duration-300 ${avatarLoaded ? 'opacity-100' : 'opacity-0'}`}
onLoad={() => setAvatarLoaded(true)}
/>
)}
@@ -240,20 +233,13 @@ export function CommonHeader() {
<div className="flex items-center gap-3 px-4 py-4 border-b border-black/10">
<div className="w-[42px] h-[42px] rounded-full overflow-hidden flex-shrink-0 bg-gray-100 relative">
{(!userImage || !avatarLoaded) && (
<Image
src="/assets/icons/user-placeholder-icon.svg"
alt="Profile"
width={42}
height={42}
className="absolute inset-0 object-cover"
style={{ width: '100%', height: '100%' }}
/>
<div className="absolute inset-0 rounded-full shimmer-loading" />
)}
{userImage && (
<img
src={userImage}
alt="Profile"
className={`w-full h-full object-cover ${avatarLoaded ? 'opacity-100' : 'opacity-0'}`}
className={`w-full h-full object-cover transition-opacity duration-300 ${avatarLoaded ? 'opacity-100' : 'opacity-0'}`}
onLoad={() => setAvatarLoaded(true)}
/>
)}