Add skeleton loading states across all tracking pages
Some checks failed
CI/CD Pipeline / Build Application (push) Has been cancelled
CI/CD Pipeline / Lint and Test (push) Has been cancelled
CI/CD Pipeline / E2E Tests (push) Has been cancelled

- 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>
This commit is contained in:
2025-10-01 20:36:11 +00:00
parent b00e75f679
commit 8276db39a2
6 changed files with 372 additions and 29 deletions

View File

@@ -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 */}