From 8276db39a29e6c84bde12f998f0b64e89ccd2ae7 Mon Sep 17 00:00:00 2001
From: Andrei <andrei@cloudz.ro>
Date: Wed, 1 Oct 2025 20:36:11 +0000
Subject: [PATCH] Add skeleton loading states across all tracking pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace CircularProgress spinners with content-aware skeleton screens
- Add FormSkeleton for form loading states (feeding, sleep, diaper pages)
- Add ActivityListSkeleton for recent activities loading
- Improves perceived performance with layout-matching placeholders

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 maternal-web/app/analytics/page.tsx           |  18 +-
 maternal-web/app/page.tsx                     |  17 +-
 maternal-web/app/track/diaper/page.tsx        |  18 +-
 maternal-web/app/track/feeding/page.tsx       |  14 +-
 maternal-web/app/track/sleep/page.tsx         |  18 +-
 .../components/common/LoadingSkeletons.tsx    | 316 ++++++++++++++++++
 6 files changed, 372 insertions(+), 29 deletions(-)
 create mode 100644 maternal-web/components/common/LoadingSkeletons.tsx

diff --git a/maternal-web/app/analytics/page.tsx b/maternal-web/app/analytics/page.tsx
index 7dce600..7fe42fc 100644
--- a/maternal-web/app/analytics/page.tsx
+++ b/maternal-web/app/analytics/page.tsx
@@ -18,6 +18,7 @@ import { AppShell } from '@/components/layouts/AppShell/AppShell';
 import { ProtectedRoute } from '@/components/common/ProtectedRoute';
 import { ErrorBoundary } from '@/components/common/ErrorBoundary';
 import { ChartErrorFallback } from '@/components/common/ErrorFallbacks';
+import { StatGridSkeleton, ChartSkeleton } from '@/components/common/LoadingSkeletons';
 import {
   TrendingUp,
   Hotel,
@@ -102,15 +103,14 @@ export default function AnalyticsPage() {
     return (
       <ProtectedRoute>
         <AppShell>
-          <Box
-            sx={{
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-              minHeight: '60vh',
-            }}
-          >
-            <CircularProgress />
+          <Box>
+            <Typography variant="h4" gutterBottom fontWeight="600" sx={{ mb: 3 }}>
+              Analytics & Insights
+            </Typography>
+            <StatGridSkeleton count={3} />
+            <Box sx={{ mt: 4 }}>
+              <ChartSkeleton height={350} />
+            </Box>
           </Box>
         </AppShell>
       </ProtectedRoute>
diff --git a/maternal-web/app/page.tsx b/maternal-web/app/page.tsx
index 4b18070..961d13d 100644
--- a/maternal-web/app/page.tsx
+++ b/maternal-web/app/page.tsx
@@ -8,6 +8,7 @@ import { EmailVerificationBanner } from '@/components/common/EmailVerificationBa
 import { ErrorBoundary } from '@/components/common/ErrorBoundary';
 import { DataErrorFallback } from '@/components/common/ErrorFallbacks';
 import { NetworkStatusIndicator } from '@/components/common/NetworkStatusIndicator';
+import { StatGridSkeleton } from '@/components/common/LoadingSkeletons';
 import {
   Restaurant,
   Hotel,
@@ -147,12 +148,11 @@ export default function HomePage() {
             isolate
             fallback={<DataErrorFallback error={new Error('Failed to load summary')} />}
           >
-            <Paper sx={{ p: 3 }}>
-              {loading ? (
-                <Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
-                  <CircularProgress />
-                </Box>
-              ) : !dailySummary ? (
+            {loading ? (
+              <StatGridSkeleton count={3} />
+            ) : (
+              <Paper sx={{ p: 3 }}>
+                {!dailySummary ? (
                 <Box sx={{ textAlign: 'center', py: 4 }}>
                   <Typography variant="body2" color="text.secondary">
                     {children.length === 0
@@ -198,8 +198,9 @@ export default function HomePage() {
                     </Box>
                   </Grid>
                 </Grid>
-              )}
-            </Paper>
+                )}
+              </Paper>
+            )}
           </ErrorBoundary>
 
           {/* Next Predicted Activity */}
diff --git a/maternal-web/app/track/diaper/page.tsx b/maternal-web/app/track/diaper/page.tsx
index 06c4dd1..a942648 100644
--- a/maternal-web/app/track/diaper/page.tsx
+++ b/maternal-web/app/track/diaper/page.tsx
@@ -27,6 +27,7 @@ import {
   ToggleButton,
   FormLabel,
 } from '@mui/material';
+import { FormSkeleton, ActivityListSkeleton } from '@/components/common/LoadingSkeletons';
 import {
   ArrowBack,
   Refresh,
@@ -305,8 +306,17 @@ export default function DiaperTrackPage() {
     return (
       <ProtectedRoute>
         <AppShell>
-          <Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}>
-            <CircularProgress />
+          <Box>
+            <Typography variant="h4" fontWeight="600" sx={{ mb: 3 }}>
+              Track Diaper Change
+            </Typography>
+            <Paper sx={{ p: 3, mb: 3 }}>
+              <FormSkeleton />
+            </Paper>
+            <Typography variant="h6" fontWeight="600" sx={{ mb: 2 }}>
+              Recent Diaper Changes
+            </Typography>
+            <ActivityListSkeleton count={3} />
           </Box>
         </AppShell>
       </ProtectedRoute>
@@ -545,9 +555,7 @@ export default function DiaperTrackPage() {
               </Box>
 
               {diapersLoading ? (
-                <Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
-                  <CircularProgress size={30} />
-                </Box>
+                <ActivityListSkeleton count={3} />
               ) : recentDiapers.length === 0 ? (
                 <Box sx={{ textAlign: 'center', py: 4 }}>
                   <Typography variant="body2" color="text.secondary">
diff --git a/maternal-web/app/track/feeding/page.tsx b/maternal-web/app/track/feeding/page.tsx
index 9cd2ba2..ce9a954 100644
--- a/maternal-web/app/track/feeding/page.tsx
+++ b/maternal-web/app/track/feeding/page.tsx
@@ -49,6 +49,7 @@ import { useAuth } from '@/lib/auth/AuthContext';
 import { trackingApi, Activity } from '@/lib/api/tracking';
 import { childrenApi, Child } from '@/lib/api/children';
 import { VoiceInputButton } from '@/components/voice/VoiceInputButton';
+import { FormSkeleton, ActivityListSkeleton } from '@/components/common/LoadingSkeletons';
 import { motion } from 'framer-motion';
 import { formatDistanceToNow } from 'date-fns';
 
@@ -308,8 +309,17 @@ function FeedingTrackPage() {
     return (
       <ProtectedRoute>
         <AppShell>
-          <Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}>
-            <CircularProgress />
+          <Box>
+            <Typography variant="h4" fontWeight="600" sx={{ mb: 3 }}>
+              Track Feeding
+            </Typography>
+            <Paper sx={{ p: 3, mb: 3 }}>
+              <FormSkeleton />
+            </Paper>
+            <Typography variant="h6" fontWeight="600" sx={{ mb: 2 }}>
+              Recent Feedings
+            </Typography>
+            <ActivityListSkeleton count={3} />
           </Box>
         </AppShell>
       </ProtectedRoute>
diff --git a/maternal-web/app/track/sleep/page.tsx b/maternal-web/app/track/sleep/page.tsx
index 891e9e5..2af4c6a 100644
--- a/maternal-web/app/track/sleep/page.tsx
+++ b/maternal-web/app/track/sleep/page.tsx
@@ -24,6 +24,7 @@ import {
   Chip,
   Snackbar,
 } from '@mui/material';
+import { FormSkeleton, ActivityListSkeleton } from '@/components/common/LoadingSkeletons';
 import {
   ArrowBack,
   Refresh,
@@ -320,8 +321,17 @@ export default function SleepTrackPage() {
     return (
       <ProtectedRoute>
         <AppShell>
-          <Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}>
-            <CircularProgress />
+          <Box>
+            <Typography variant="h4" fontWeight="600" sx={{ mb: 3 }}>
+              Track Sleep
+            </Typography>
+            <Paper sx={{ p: 3, mb: 3 }}>
+              <FormSkeleton />
+            </Paper>
+            <Typography variant="h6" fontWeight="600" sx={{ mb: 2 }}>
+              Recent Sleep Activities
+            </Typography>
+            <ActivityListSkeleton count={3} />
           </Box>
         </AppShell>
       </ProtectedRoute>
@@ -536,9 +546,7 @@ export default function SleepTrackPage() {
               </Box>
 
               {sleepsLoading ? (
-                <Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
-                  <CircularProgress size={30} />
-                </Box>
+                <ActivityListSkeleton count={3} />
               ) : recentSleeps.length === 0 ? (
                 <Box sx={{ textAlign: 'center', py: 4 }}>
                   <Typography variant="body2" color="text.secondary">
diff --git a/maternal-web/components/common/LoadingSkeletons.tsx b/maternal-web/components/common/LoadingSkeletons.tsx
new file mode 100644
index 0000000..ff62e5f
--- /dev/null
+++ b/maternal-web/components/common/LoadingSkeletons.tsx
@@ -0,0 +1,316 @@
+import React from 'react';
+import { Box, Card, CardContent, Skeleton, Stack, Paper } from '@mui/material';
+
+/**
+ * Skeleton loader for activity cards
+ */
+export function ActivityCardSkeleton() {
+  return (
+    <Card sx={{ mb: 2 }}>
+      <CardContent>
+        <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
+          <Skeleton variant="circular" width={40} height={40} sx={{ mr: 2 }} />
+          <Box sx={{ flex: 1 }}>
+            <Skeleton variant="text" width="60%" height={24} />
+            <Skeleton variant="text" width="40%" height={20} />
+          </Box>
+        </Box>
+        <Skeleton variant="text" width="80%" />
+        <Skeleton variant="text" width="50%" />
+      </CardContent>
+    </Card>
+  );
+}
+
+/**
+ * Skeleton loader for activity list
+ */
+export function ActivityListSkeleton({ count = 3 }: { count?: number }) {
+  return (
+    <>
+      {Array.from({ length: count }).map((_, index) => (
+        <ActivityCardSkeleton key={index} />
+      ))}
+    </>
+  );
+}
+
+/**
+ * Skeleton loader for stat cards
+ */
+export function StatCardSkeleton() {
+  return (
+    <Paper sx={{ p: 3 }}>
+      <Skeleton variant="text" width="40%" height={20} sx={{ mb: 1 }} />
+      <Skeleton variant="text" width="60%" height={32} sx={{ mb: 1 }} />
+      <Skeleton variant="text" width="50%" height={16} />
+    </Paper>
+  );
+}
+
+/**
+ * Skeleton loader for stat grid
+ */
+export function StatGridSkeleton({ count = 4 }: { count?: number }) {
+  return (
+    <Box
+      sx={{
+        display: 'grid',
+        gridTemplateColumns: {
+          xs: '1fr',
+          sm: 'repeat(2, 1fr)',
+          md: 'repeat(4, 1fr)',
+        },
+        gap: 2,
+        mb: 3,
+      }}
+    >
+      {Array.from({ length: count }).map((_, index) => (
+        <StatCardSkeleton key={index} />
+      ))}
+    </Box>
+  );
+}
+
+/**
+ * Skeleton loader for charts
+ */
+export function ChartSkeleton({ height = 300 }: { height?: number }) {
+  return (
+    <Paper sx={{ p: 3 }}>
+      <Skeleton variant="text" width="40%" height={24} sx={{ mb: 3 }} />
+      <Skeleton variant="rectangular" width="100%" height={height} />
+      <Box sx={{ display: 'flex', justifyContent: 'space-around', mt: 2 }}>
+        <Skeleton variant="text" width={60} />
+        <Skeleton variant="text" width={60} />
+        <Skeleton variant="text" width={60} />
+        <Skeleton variant="text" width={60} />
+      </Box>
+    </Paper>
+  );
+}
+
+/**
+ * Skeleton loader for child profile card
+ */
+export function ChildProfileSkeleton() {
+  return (
+    <Card sx={{ mb: 2 }}>
+      <CardContent>
+        <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
+          <Skeleton variant="circular" width={60} height={60} sx={{ mr: 2 }} />
+          <Box sx={{ flex: 1 }}>
+            <Skeleton variant="text" width="50%" height={28} />
+            <Skeleton variant="text" width="30%" height={20} />
+          </Box>
+        </Box>
+        <Skeleton variant="text" width="70%" />
+        <Skeleton variant="text" width="60%" />
+      </CardContent>
+    </Card>
+  );
+}
+
+/**
+ * Skeleton loader for form fields
+ */
+export function FormSkeleton() {
+  return (
+    <Stack spacing={3}>
+      <Box>
+        <Skeleton variant="text" width={100} height={20} sx={{ mb: 1 }} />
+        <Skeleton variant="rectangular" width="100%" height={56} />
+      </Box>
+      <Box>
+        <Skeleton variant="text" width={100} height={20} sx={{ mb: 1 }} />
+        <Skeleton variant="rectangular" width="100%" height={56} />
+      </Box>
+      <Box>
+        <Skeleton variant="text" width={100} height={20} sx={{ mb: 1 }} />
+        <Skeleton variant="rectangular" width="100%" height={56} />
+      </Box>
+      <Skeleton variant="rectangular" width={120} height={42} />
+    </Stack>
+  );
+}
+
+/**
+ * Skeleton loader for table rows
+ */
+export function TableRowSkeleton({ columns = 4 }: { columns?: number }) {
+  return (
+    <Box sx={{ display: 'flex', gap: 2, py: 2, borderBottom: 1, borderColor: 'divider' }}>
+      {Array.from({ length: columns }).map((_, index) => (
+        <Skeleton key={index} variant="text" width={`${100 / columns}%`} height={20} />
+      ))}
+    </Box>
+  );
+}
+
+/**
+ * Skeleton loader for table
+ */
+export function TableSkeleton({ rows = 5, columns = 4 }: { rows?: number; columns?: number }) {
+  return (
+    <Paper sx={{ p: 2 }}>
+      {/* Header */}
+      <Box sx={{ display: 'flex', gap: 2, py: 2, borderBottom: 2, borderColor: 'divider', mb: 2 }}>
+        {Array.from({ length: columns }).map((_, index) => (
+          <Skeleton key={index} variant="text" width={`${100 / columns}%`} height={24} />
+        ))}
+      </Box>
+      {/* Rows */}
+      {Array.from({ length: rows }).map((_, index) => (
+        <TableRowSkeleton key={index} columns={columns} />
+      ))}
+    </Paper>
+  );
+}
+
+/**
+ * Skeleton loader for list items
+ */
+export function ListItemSkeleton() {
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center', py: 2, borderBottom: 1, borderColor: 'divider' }}>
+      <Skeleton variant="circular" width={40} height={40} sx={{ mr: 2 }} />
+      <Box sx={{ flex: 1 }}>
+        <Skeleton variant="text" width="70%" height={20} />
+        <Skeleton variant="text" width="40%" height={16} />
+      </Box>
+      <Skeleton variant="rectangular" width={80} height={32} />
+    </Box>
+  );
+}
+
+/**
+ * Skeleton loader for list
+ */
+export function ListSkeleton({ count = 5 }: { count?: number }) {
+  return (
+    <Paper sx={{ p: 2 }}>
+      {Array.from({ length: count }).map((_, index) => (
+        <ListItemSkeleton key={index} />
+      ))}
+    </Paper>
+  );
+}
+
+/**
+ * Skeleton loader for dashboard summary
+ */
+export function DashboardSummarySkeleton() {
+  return (
+    <Box>
+      {/* Header */}
+      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 3 }}>
+        <Skeleton variant="text" width={200} height={40} />
+        <Skeleton variant="rectangular" width={120} height={40} />
+      </Box>
+
+      {/* Stats Grid */}
+      <StatGridSkeleton count={4} />
+
+      {/* Recent Activities */}
+      <Paper sx={{ p: 3, mb: 3 }}>
+        <Skeleton variant="text" width={150} height={28} sx={{ mb: 2 }} />
+        <ActivityListSkeleton count={3} />
+      </Paper>
+
+      {/* Charts */}
+      <Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', md: 'repeat(2, 1fr)' }, gap: 3 }}>
+        <ChartSkeleton height={250} />
+        <ChartSkeleton height={250} />
+      </Box>
+    </Box>
+  );
+}
+
+/**
+ * Skeleton loader for chat messages
+ */
+export function ChatMessageSkeleton({ isUser = false }: { isUser?: boolean }) {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: isUser ? 'flex-end' : 'flex-start',
+        mb: 2,
+      }}
+    >
+      {!isUser && <Skeleton variant="circular" width={40} height={40} sx={{ mr: 2 }} />}
+      <Box sx={{ maxWidth: '70%' }}>
+        <Skeleton variant="rounded" width={200} height={60} />
+        <Skeleton variant="text" width={100} height={16} sx={{ mt: 0.5 }} />
+      </Box>
+      {isUser && <Skeleton variant="circular" width={40} height={40} sx={{ ml: 2 }} />}
+    </Box>
+  );
+}
+
+/**
+ * Skeleton loader for chat conversation
+ */
+export function ChatSkeleton({ messageCount = 4 }: { messageCount?: number }) {
+  return (
+    <Box sx={{ p: 2 }}>
+      {Array.from({ length: messageCount }).map((_, index) => (
+        <ChatMessageSkeleton key={index} isUser={index % 2 === 0} />
+      ))}
+    </Box>
+  );
+}
+
+/**
+ * Skeleton loader for page content
+ */
+export function PageSkeleton() {
+  return (
+    <Box>
+      {/* Page header */}
+      <Box sx={{ display: 'flex', alignItems: 'center', mb: 3 }}>
+        <Skeleton variant="circular" width={40} height={40} sx={{ mr: 2 }} />
+        <Skeleton variant="text" width={250} height={40} />
+      </Box>
+
+      {/* Content */}
+      <Paper sx={{ p: 3 }}>
+        <Skeleton variant="text" width="60%" height={28} sx={{ mb: 2 }} />
+        <Skeleton variant="text" width="100%" />
+        <Skeleton variant="text" width="100%" />
+        <Skeleton variant="text" width="80%" sx={{ mb: 3 }} />
+
+        <Skeleton variant="rectangular" width="100%" height={200} sx={{ mb: 2 }} />
+
+        <Skeleton variant="text" width="100%" />
+        <Skeleton variant="text" width="90%" />
+      </Paper>
+    </Box>
+  );
+}
+
+/**
+ * Full page loading overlay with spinner
+ */
+export function LoadingOverlay({ message = 'Loading...' }: { message?: string }) {
+  return (
+    <Box
+      sx={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        bgcolor: 'rgba(255, 255, 255, 0.9)',
+        zIndex: 9999,
+      }}
+    >
+      <Skeleton variant="circular" width={60} height={60} sx={{ mb: 2 }} />
+      <Skeleton variant="text" width={150} height={24} />
+    </Box>
+  );
+}