Alo/phaseflow
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement skeleton loading states for dashboard and routes (P3.8)

Browse Source 
Add skeleton loading components per specs/dashboard.md requirements:
- DecisionCardSkeleton: Shimmer placeholder for status and reason
- DataPanelSkeleton: Skeleton rows for 5 metrics
- NutritionPanelSkeleton: Skeleton for nutrition guidance
- MiniCalendarSkeleton: Placeholder grid with navigation and legend
- OverrideTogglesSkeleton: 4 toggle placeholders
- CycleInfoSkeleton: Cycle day and phase placeholders
- DashboardSkeleton: Combined skeleton for route-level loading

Add Next.js loading.tsx files for instant loading states:
- src/app/loading.tsx (Dashboard)
- src/app/calendar/loading.tsx
- src/app/history/loading.tsx
- src/app/plan/loading.tsx
- src/app/settings/loading.tsx

Update dashboard page to use DashboardSkeleton instead of "Loading..." text.

Fix flaky garmin test with wider date tolerance for timezone variations.

29 new tests in skeletons.test.tsx (749 total tests passing).

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Petru
2026-01-11 09:32:09 +00:00
parent 714194f2d3
commit 9c5b8466f6
11 changed files with 708 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
IMPLEMENTATION_PLAN.md
View File

@@ -4,7 +4,7 @@ This file is maintained by Ralph. Run `./ralph-sandbox.sh plan 3` to generate ta
## Current State Summary
### Overall Status: 720 tests passing across 40 test files
### Overall Status: 749 tests passing across 42 test files
### Library Implementation
| File | Status | Gap Analysis |
@@ -645,12 +645,18 @@ Testing, error handling, and refinements.
- Error events (error): err object with stack trace
- **Why:** Better debugging and user experience with structured JSON logs
### P3.8: Loading States
- [ ] Add loading indicators to all pages
### P3.8: Loading States ✅ COMPLETE
- [x] Add loading indicators to all pages
- **Files:**
- All page files - Add loading.tsx or Suspense boundaries
- `src/components/dashboard/skeletons.tsx` - Skeleton components (DecisionCardSkeleton, DataPanelSkeleton, NutritionPanelSkeleton, MiniCalendarSkeleton, OverrideTogglesSkeleton, CycleInfoSkeleton, DashboardSkeleton)
- `src/components/dashboard/skeletons.test.tsx` - 29 tests
- `src/app/loading.tsx` - Dashboard route loading state
- `src/app/calendar/loading.tsx` - Calendar route loading state
- `src/app/history/loading.tsx` - History route loading state
- `src/app/plan/loading.tsx` - Plan route loading state
- `src/app/settings/loading.tsx` - Settings route loading state
- **Features:** Skeleton placeholders with shimmer animations matching spec requirements, updated dashboard page to use skeleton components
- **Why:** Better perceived performance
### P3.9: Token Expiration Warnings ✅ COMPLETE
- [x] Email warnings at 14 and 7 days before Garmin token expiry
- **Files:**
@@ -812,7 +818,6 @@ P4.* UX Polish ────────> After core functionality complete
| Priority | Task | Effort | Notes |
|----------|------|--------|-------|
| Low | P3.8 Loading States | Small | Polish |
| Low | P4.* UX Polish | Various | After core complete |
### Dependency Summary
@@ -891,6 +896,7 @@ P4.* UX Polish ────────> After core functionality complete
- [x] **P3.5: Encryption Tests** - Complete with 14 tests covering AES-256-GCM round-trip, error handling, key validation
- [x] **P3.6: Garmin Tests** - Complete with 33 tests covering API interactions, token expiry, error handling
- [x] **P3.7: Error Handling Improvements** - Replaced console.error with structured pino logger across API routes, added key event logging (Period logged, Override toggled, Decision calculated, Auth failure), 3 new tests in auth-middleware.test.ts
- [x] **P3.8: Loading States** - Complete with skeleton components (DecisionCardSkeleton, DataPanelSkeleton, NutritionPanelSkeleton, MiniCalendarSkeleton, OverrideTogglesSkeleton, CycleInfoSkeleton, DashboardSkeleton), 29 tests in skeletons.test.tsx; loading.tsx files for all routes (dashboard, calendar, history, plan, settings); shimmer animations matching spec requirements
- [x] **P3.9: Token Expiration Warnings** - Complete with 10 new tests in email.test.ts, 10 new tests in garmin-sync/route.test.ts; sends warnings at 14 and 7 days before expiry
- [x] **P3.11: Missing Component Tests** - Complete with 82 tests across 5 component test files (DecisionCard: 11, DataPanel: 18, NutritionPanel: 12, OverrideToggles: 18, DayCell: 23)