feat: Implement shimmer loading for profile and avatar images across various components.

src/components/settings/ProfileSettingsForm.tsx

@@ -390,19 +390,13 @@ export function ProfileSettingsForm({
         <div className="flex items-start gap-4">
           <div className="w-[60px] h-[60px] rounded-full overflow-hidden border border-[#00293D]/20 flex-shrink-0 bg-gray-100 relative">
             {(!avatarUrl || !avatarLoaded) && (
-              <Image
-                src="/assets/icons/user-placeholder-icon.svg"
-                alt="Profile"
-                width={60}
-                height={60}
-                className="absolute inset-0 w-full h-full object-cover"
-              />
+              <div className="absolute inset-0 rounded-full shimmer-loading" />
             )}
             {avatarUrl && (
               <img
                 src={avatarUrl}
                 alt="Profile"
-                className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-200 ${avatarLoaded ? 'opacity-100' : 'opacity-0'}`}
+                className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-300 ${avatarLoaded ? 'opacity-100' : 'opacity-0'}`}
                 onLoad={() => setAvatarLoaded(true)}
               />
             )}