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

src/components/home/TopProfessionals.tsx

@@ -31,17 +31,24 @@ function ProfessionalCard({
   profileLink,
 }: ProfessionalCardProps) {
   const starCount = rating ? Math.round(rating) : 0;
+  const [imgLoaded, setImgLoaded] = useState(false);
+  const placeholder = '/assets/icons/user-placeholder-icon.svg';
+  const isPlaceholder = imageUrl === placeholder;
 
   return (
     <Link href={profileLink}>
       <div className="bg-white rounded-[15px] overflow-hidden shadow-[0px_4px_20px_rgba(0,0,0,0.08)] hover:shadow-[0px_6px_24px_rgba(0,0,0,0.12)] transition-shadow cursor-pointer">
         {/* Image */}
         <div className="relative h-[226px] w-full overflow-hidden bg-gray-100">
+          {!imgLoaded && !isPlaceholder && (
+            <div className="absolute inset-0 shimmer-loading" />
+          )}
           <Image
             src={imageUrl}
             alt={name}
             fill
-            className="object-cover"
+            className={`object-cover transition-opacity duration-300 ${isPlaceholder || imgLoaded ? 'opacity-100' : 'opacity-0'}`}
+            onLoad={() => setImgLoaded(true)}
           />
         </div>