Implement skeleton loading states for dashboard and routes (P3.8)
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:
@@ -9,6 +9,7 @@ import { DecisionCard } from "@/components/dashboard/decision-card";
|
||||
import { MiniCalendar } from "@/components/dashboard/mini-calendar";
|
||||
import { NutritionPanel } from "@/components/dashboard/nutrition-panel";
|
||||
import { OverrideToggles } from "@/components/dashboard/override-toggles";
|
||||
import { DashboardSkeleton } from "@/components/dashboard/skeletons";
|
||||
import type {
|
||||
CyclePhase,
|
||||
Decision,
|
||||
@@ -152,11 +153,7 @@ export default function Dashboard() {
|
||||
</header>
|
||||
|
||||
<main className="container mx-auto p-6">
|
||||
{loading && (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-zinc-500">Loading...</p>
|
||||
</div>
|
||||
)}
|
||||
{loading && <DashboardSkeleton />}
|
||||
|
||||
{error && (
|
||||
<div role="alert" className="text-center py-12">
|
||||
|
||||
Reference in New Issue
Block a user