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

src/components/settings/ProfileSettingsForm.tsx

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