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

feat: implement avatar loading shimmers and restrict privacy settings visibility by user role

Browse Source
This commit is contained in:
pradeepkumar
2026-03-28 17:01:37 +05:30
parent 391d717987
commit d0d43eb69b
10 changed files with 151 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -118,10 +118,14 @@ 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">
{/* 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>
{/* Shimmer while loading, initials only on error */}
{avatarError || !userImage ? (
<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>
) : !avatarLoaded ? (
<div className="absolute inset-0 rounded-full shimmer-loading" />
) : null}
{userImage && !avatarError && (
<img
ref={(el) => { if (el?.complete && el.naturalWidth > 0) setAvatarLoaded(true); }}