ui phase 1

client/src/components/NurseResultCard/NurseResultCard.tsx

@@ -1,9 +1,10 @@
-import { memo } from 'react';
+import { FunctionComponent, memo } from 'react';
 import { useLocale, useTranslations } from 'next-intl';
-import { Avatar, Box, Paper, Stack, Typography } from '@mui/material';
+import { Avatar, Box, Paper, Skeleton, Stack, Typography } from '@mui/material';
 import AppIcon from '../common/AppIcon';
 import TrustBadge from '../TrustBadge';
 import PriceDisplay from '../PriceDisplay';
+import { formatNumber } from '@/utils';
 import type { NurseSearchResult } from '@/services/search/types';
 
 export interface NurseResultCardProps {
@@ -14,10 +15,7 @@ export interface NurseResultCardProps {
 }
 
 function ratingText(rating: number, locale: string): string {
-  return new Intl.NumberFormat(locale === 'fa' ? 'fa-IR' : 'en-US', {
-    minimumFractionDigits: 1,
-    maximumFractionDigits: 1,
-  }).format(rating);
+  return formatNumber(rating, locale, { minimumFractionDigits: 1, maximumFractionDigits: 1 });
 }
 
 /**
@@ -35,11 +33,7 @@ const NurseResultCard = ({ nurse, onSelect }: NurseResultCardProps) => {
   const name = nurse.nurseName.trim() || t('unnamed_nurse');
   const initial = name.charAt(0);
   const distance =
-    nurse.distanceKm != null
-      ? new Intl.NumberFormat(locale === 'fa' ? 'fa-IR' : 'en-US', { maximumFractionDigits: 1 }).format(
-          nurse.distanceKm,
-        )
-      : null;
+    nurse.distanceKm != null ? formatNumber(nurse.distanceKm, locale, { maximumFractionDigits: 1 }) : null;
 
   return (
     <Paper
@@ -84,7 +78,7 @@ const NurseResultCard = ({ nurse, onSelect }: NurseResultCardProps) => {
 
         <Stack direction="row" sx={{ gap: 1.5, alignItems: 'center', flexWrap: 'wrap' }}>
           <Stack direction="row" sx={{ gap: 0.5, alignItems: 'center' }}>
-            <AppIcon icon="star" size={16} color="var(--bal-warning)" />
+            <AppIcon icon="star" size={16} color="var(--bal-rating)" />
             <Typography variant="body2" sx={{ fontWeight: 700 }}>
               {ratingText(nurse.averageRating, locale)}
             </Typography>
@@ -114,4 +108,17 @@ const NurseResultCard = ({ nurse, onSelect }: NurseResultCardProps) => {
   );
 };
 
-export default memo(NurseResultCard);
+/** Matches the real card's anatomy (avatar disc, name/badge row, rating row, price row) so a loading list
+ * doesn't jump when data lands. */
+const NurseResultCardSkeleton: FunctionComponent = () => (
+  <Paper elevation={0} sx={{ p: 2, display: 'flex', gap: 2, alignItems: 'flex-start', border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
+    <Skeleton variant="circular" width={56} height={56} />
+    <Stack sx={{ gap: 0.75, flexGrow: 1 }}>
+      <Skeleton variant="text" width="55%" height={28} />
+      <Skeleton variant="text" width="40%" height={20} />
+      <Skeleton variant="text" width="30%" height={20} />
+    </Stack>
+  </Paper>
+);
+
+export default Object.assign(memo(NurseResultCard), { Skeleton: NurseResultCardSkeleton });