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

src/app/(user)/user/profile/[id]/page.tsx

@@ -77,6 +77,7 @@ export default function AgentProfileView() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [imageError, setImageError] = useState(false);
+  const [imageLoaded, setImageLoaded] = useState(false);
   const [avatarUrl, setAvatarUrl] = useState<string | null>(null);
 
   const [testimonials, setTestimonials] = useState<{ id: string; text: string; author: string; role: string; rating: number }[]>([]);
@@ -284,13 +285,19 @@ export default function AgentProfileView() {
           <div className="relative w-[200px] lg:w-[260px]">
             <div className="w-[200px] h-[200px] lg:w-[260px] lg:h-[260px] rounded-[15px] overflow-hidden bg-[#e8e8e8]">
               {getProfileImageUrl() ? (
-                /* eslint-disable-next-line @next/next/no-img-element */
-                <img
-                  src={getProfileImageUrl()!}
-                  alt="Profile"
-                  className="w-full h-full object-cover"
-                  onError={() => setImageError(true)}
-                />
+                <>
+                  {!imageLoaded && (
+                    <div className="absolute inset-0 shimmer-loading rounded-[15px]" />
+                  )}
+                  {/* eslint-disable-next-line @next/next/no-img-element */}
+                  <img
+                    src={getProfileImageUrl()!}
+                    alt="Profile"
+                    className={`w-full h-full object-cover transition-opacity duration-300 ${imageLoaded ? 'opacity-100' : 'opacity-0'}`}
+                    onLoad={() => setImageLoaded(true)}
+                    onError={() => setImageError(true)}
+                  />
+                </>
               ) : (
                 <div className="w-full h-full flex items-center justify-center">
                   <Image