Add skeleton loading states across all tracking pages
- 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:
@@ -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 */}
|
||||
|
||||
Reference in New Issue
Block a user