feat: Improve avatar loading experience by displaying placeholders until images are fully loaded across various components.

src/components/message/ChatHeader.tsx

@@ -33,6 +33,10 @@ export function ChatHeader({
 }: ChatHeaderProps) {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [isMuted, setIsMuted] = useState(false);
+  const [avatarLoaded, setAvatarLoaded] = useState(false);
+
+  const placeholder = '/assets/icons/user-placeholder-icon.svg';
+  const isPlaceholderAvatar = !avatar || avatar === placeholder;
 
   const menuItems: DropdownMenuItem[] = [
     {
@@ -118,15 +122,24 @@ export function ChatHeader({
       <div className="flex items-start gap-3">
         {/* Avatar */}
         <div className="relative flex-shrink-0">
-          <div className="w-[50px] h-[50px] rounded-full overflow-hidden border border-[#00293D]/20">
-            <Image
-              src={avatar}
-              alt={name}
-              width={50}
-              height={50}
-              className="object-cover rounded-full"
-              style={{ width: '100%', height: '100%' }}
-            />
+          <div className="w-[50px] h-[50px] rounded-full overflow-hidden border border-[#00293D]/20 relative">
+            {(!avatar || !avatarLoaded || isPlaceholderAvatar) && (
+              <Image
+                src={placeholder}
+                alt={name}
+                width={50}
+                height={50}
+                className="absolute inset-0 w-full h-full object-cover"
+              />
+            )}
+            {avatar && !isPlaceholderAvatar && (
+              <img
+                src={avatar}
+                alt={name}
+                className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-200 ${avatarLoaded ? 'opacity-100' : 'opacity-0'}`}
+                onLoad={() => setAvatarLoaded(true)}
+              />
+            )}
           </div>
           {isOnline && (
             <div className="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white" />