feat: Improve avatar loading experience by displaying placeholders until images are fully loaded across various components.

src/utils/profileDataMapper.ts

@@ -360,8 +360,9 @@ export function mapFieldValuesToSpecializationFields(fieldValues: FieldValueResp
     return sectionSlug === 'specialization' || sectionSlug.includes('specialization');
   });
 
-  // Create a card for each field
+  // Create a card for each field, deduplicating by fieldSlug
   const fields: SpecializationFieldItem[] = [];
+  const seenSlugs = new Set<string>();
 
   for (const field of specializationFields) {
     const { fieldSlug, fieldName, value } = field;
@@ -369,6 +370,10 @@ export function mapFieldValuesToSpecializationFields(fieldValues: FieldValueResp
     // Skip if no field info or no value
     if (!fieldSlug || !fieldName) continue;
 
+    // Skip duplicate fieldSlugs (API may return duplicates)
+    if (seenSlugs.has(fieldSlug)) continue;
+    seenSlugs.add(fieldSlug);
+
     const values = valueToStringArray(value);
     if (values.length === 0) continue;