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

src/components/message/ChatHeader.tsx

@@ -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); }}

src/components/message/MessagingPage.tsx

@@ -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); }}