ui phase 1

client/src/components/VisitNoteCard/VisitNoteCard.tsx

@@ -2,10 +2,10 @@
 import { FunctionComponent } from 'react';
 import Box from '@mui/material/Box';
 import Chip from '@mui/material/Chip';
-import Paper from '@mui/material/Paper';
+import Skeleton from '@mui/material/Skeleton';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
-import { AppIcon } from '@/components/common';
+import { AppIcon, SurfaceCard } from '@/components/common';
 import type { VisitNote } from '@/services/patientRecords/types';
 
 export interface VisitNoteCardProps {
@@ -26,7 +26,7 @@ export interface VisitNoteCardProps {
  */
 const VisitNoteCard: FunctionComponent<VisitNoteCardProps> = ({ note, dateLabel, authorFallback }) => {
   return (
-    <Paper elevation={0} sx={{ p: 2, border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
+    <SurfaceCard padding="sm">
       <Stack direction="row" sx={{ alignItems: 'center', gap: 1, mb: 1, flexWrap: 'wrap' }}>
         <AppIcon icon="notes" size={18} color="var(--bal-primary)" />
         <Typography variant="body2" sx={{ fontWeight: 700 }}>
@@ -61,8 +61,25 @@ const VisitNoteCard: FunctionComponent<VisitNoteCardProps> = ({ note, dateLabel,
           ))}
         </Box>
       ) : null}
-    </Paper>
+    </SurfaceCard>
   );
 };
 
-export default VisitNoteCard;
+/** Matches the real card's anatomy (author/date row, body lines, task-chip row) for the visit-note history. */
+const VisitNoteCardSkeleton: FunctionComponent = () => (
+  <SurfaceCard padding="sm">
+    <Stack direction="row" sx={{ alignItems: 'center', gap: 1, mb: 1 }}>
+      <Skeleton variant="circular" width={18} height={18} />
+      <Skeleton variant="text" width={100} height={20} />
+      <Skeleton variant="text" width={80} height={16} sx={{ marginInlineStart: 'auto' }} />
+    </Stack>
+    <Skeleton variant="text" width="100%" height={18} />
+    <Skeleton variant="text" width="80%" height={18} />
+    <Stack direction="row" sx={{ gap: 0.5, mt: 1 }}>
+      <Skeleton variant="rounded" width={70} height={24} />
+      <Skeleton variant="rounded" width={70} height={24} />
+    </Stack>
+  </SurfaceCard>
+);
+
+export default Object.assign(VisitNoteCard, { Skeleton: VisitNoteCardSkeleton });