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/message/ChatHeader.tsx
View File

@@ -152,10 +152,14 @@ export function ChatHeader({
{/* Avatar */}
<div className="relative flex-shrink-0">
<div className="w-[50px] h-[50px] rounded-full overflow-hidden border border-[#00293D]/20 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-[20px]">{name?.[0]?.toUpperCase() || '?'}</span>
</div>
{/* Shimmer while loading, initials only on error */}
{avatarError || isPlaceholderAvatar || !avatar ? (
<div className="absolute inset-0 rounded-full bg-[#c4d9d4] flex items-center justify-center">
<span className="font-bold text-[#00293d] text-[20px]">{name?.[0]?.toUpperCase() || '?'}</span>
</div>
) : !avatarLoaded ? (
<div className="absolute inset-0 rounded-full shimmer-loading" />
) : null}
{avatar && !isPlaceholderAvatar && !avatarError && (
<img
ref={(el) => { if (el?.complete && el.naturalWidth > 0) setAvatarLoaded(true); }}

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

@@ -92,10 +92,14 @@ function AvatarWithPlaceholder({ src, alt, size, name }: { src: string; alt: str
return (
<>
{/* Initials base layer - always rendered behind image */}
<div className="absolute inset-0 rounded-full bg-[#c4d9d4] flex items-center justify-center">
<span className="font-bold text-[#00293d]" style={{ fontSize: size * 0.4 }}>{initial}</span>
</div>
{/* Shimmer while loading, initials only on error/no image */}
{imgError || isPlaceholder ? (
<div className="absolute inset-0 rounded-full bg-[#c4d9d4] flex items-center justify-center">
<span className="font-bold text-[#00293d]" style={{ fontSize: size * 0.4 }}>{initial}</span>
</div>
) : !loaded ? (
<div className="absolute inset-0 rounded-full shimmer-loading" />
) : null}
{src && !isPlaceholder && !imgError && (
<img
ref={(el) => { if (el?.complete && el.naturalWidth > 0) setLoaded(true); }}