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

fix

Browse Source
This commit is contained in:
pradeepkumar
2026-03-27 15:47:29 +05:30
parent bed03ad949
commit 37d66150c3
9 changed files with 84 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -18,6 +18,7 @@ export function CommonHeader() {
const [showProfileMenu, setShowProfileMenu] = useState(false);
const [showGuestMenu, setShowGuestMenu] = useState(false);
const [showMobileMenu, setShowMobileMenu] = useState(false);
const [avatarError, setAvatarError] = useState(false);
const profileMenuRef = useRef<HTMLDivElement>(null);
const guestMenuRef = useRef<HTMLDivElement>(null);
const mobileMenuRef = useRef<HTMLDivElement>(null);
@@ -117,16 +118,18 @@ 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) && (
<div className="absolute inset-0 rounded-full shimmer-loading" />
)}
{userImage && (
{/* Initials base layer */}
<div className="absolute inset-0 rounded-full bg-[#c4d9d4] flex items-center justify-center">
<span className="font-bold text-[#00293d] text-[14px]">{userName?.[0]?.toUpperCase() || '?'}</span>
</div>
{userImage && !avatarError && (
<img
ref={(el) => { if (el?.complete && el.naturalWidth > 0) setAvatarLoaded(true); }}
src={userImage}
alt="Profile"
className={`w-full h-full object-cover transition-opacity duration-300 ${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)}
onError={() => setAvatarError(true)}
/>
)}
</div>
@@ -148,16 +151,18 @@ 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) && (
<div className="absolute inset-0 rounded-full shimmer-loading" />
)}
{userImage && (
{/* Initials base layer */}
<div className="absolute inset-0 rounded-full bg-[#c4d9d4] flex items-center justify-center">
<span className="font-bold text-[#00293d] text-[17px]">{userName?.[0]?.toUpperCase() || '?'}</span>
</div>
{userImage && !avatarError && (
<img
ref={(el) => { if (el?.complete && el.naturalWidth > 0) setAvatarLoaded(true); }}
src={userImage}
alt="Profile"
className={`w-full h-full object-cover transition-opacity duration-300 ${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)}
onError={() => setAvatarError(true)}
/>
)}
</div>