feat: Implement useImageStatus hook and enhance image loading status handling across various components to address cached images and loading timeouts.

src/components/message/ChatHeader.tsx

@@ -128,6 +128,7 @@ export function ChatHeader({
             )}
             {avatar && !isPlaceholderAvatar && (
               <img
+                ref={(el) => { if (el?.complete && el.naturalWidth > 0) setAvatarLoaded(true); }}
                 src={avatar}
                 alt={name}
                 className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-300 ${avatarLoaded ? 'opacity-100' : 'opacity-0'}`}

src/components/message/MessagingPage.tsx

@@ -94,6 +94,7 @@ function AvatarWithPlaceholder({ src, alt, size }: { src: string; alt: string; s
       )}
       {src && !isPlaceholder && (
         <img
+          ref={(el) => { if (el?.complete && el.naturalWidth > 0) setLoaded(true); }}
           src={src}
           alt={alt}
           className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-300 ${loaded ? 'opacity-100' : 'opacity-0'}`}