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

src/app/(user)/user/profiles/page.tsx

@@ -77,6 +77,7 @@ function ProfileImage({ src, alt, className }: { src: string | null; alt: string
       {src && status !== 'error' ? (
         /* eslint-disable-next-line @next/next/no-img-element */
         <img
+          ref={(el) => { if (el?.complete) setStatus(el.naturalWidth > 0 ? 'loaded' : 'error'); }}
           src={src}
           alt={alt}
           className={`w-full h-full object-cover transition-opacity duration-300 ${status === 'loaded' ? 'opacity-100' : 'opacity-0'}`}