lorentz/wulf-pulse
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

feat(08-02): page shell + skeleton + period/fetch wiring (Task 1a)

Browse source 
- New app/mobile/engagement/[userId]/page.tsx with fetch + error states + retryNonce
- New EngagementProfileSkeleton with header/metric/breakdown/list skeletons
- 404 renders 'User not found' + back link; 500 renders sonner toast + Retry
- D-04 comment: relies on App Router default scrollRestoration
- D-01/D-22 guard rails: EngagementUserRow.tsx and data endpoint untouched
This commit is contained in:
lorentz 2026-05-07 20:46:28 -04:00
parent b1a6e6a3c3
commit 3247c92486
2 changed files with 275 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

77
components/mobile/EngagementProfileSkeleton.tsx Normal file
View file

@ -0,0 +1,77 @@
'use client';
/* EngagementProfileSkeleton — phase 08 (D-23).
* Purpose: Full-page loading skeleton matching the final layout —
* header skeleton + 4 metric-card skeletons (2×2) + breakdown card skeleton +
* 2 list-section skeletons. Period chips render OUTSIDE this skeleton (they
* drive the fetch). */
import { Card, CardContent } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';
export function EngagementProfileSkeleton() {
return (
<div className="space-y-4">
{/* Identity header skeleton */}
<Card className="py-0 shadow-none">
<CardContent className="px-4 py-4 flex items-center gap-3">
<Skeleton className="h-14 w-14 rounded-full shrink-0" />
<div className="flex-1 space-y-2 min-w-0">
<Skeleton className="h-5 w-40" />
<Skeleton className="h-3 w-32" />
<Skeleton className="h-3 w-48" />
</div>
</CardContent>
</Card>
{/* 2×2 metric grid skeleton */}
<div className="grid grid-cols-2 gap-3">
{[0, 1, 2, 3].map((i) => (
<Card key={i} className="py-0 shadow-none">
<CardContent className="px-4 py-4">
<Skeleton className="h-7 w-16" />
<Skeleton className="h-3 w-24 mt-2" />
</CardContent>
</Card>
))}
</div>
{/* Breakdown card skeleton */}
<Card className="py-0 shadow-none">
<CardContent className="px-4 py-4 space-y-4">
<div className="space-y-2">
<Skeleton className="h-3 w-24" />
<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-full" />
</div>
<div className="space-y-2 border-t border-border pt-3">
<Skeleton className="h-3 w-32" />
<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-full" />
</div>
<div className="space-y-2 border-t border-border pt-3">
<Skeleton className="h-3 w-28" />
<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-full" />
</div>
</CardContent>
</Card>
{/* Two list skeletons */}
{[0, 1].map((i) => (
<Card key={i} className="py-0 shadow-none">
<CardContent className="px-4 py-4 space-y-3">
<Skeleton className="h-4 w-32" />
{[0, 1, 2].map((j) => (
<div key={j} className="flex items-center justify-between">
<Skeleton className="h-3 w-40" />
<Skeleton className="h-3 w-12" />
</div>
))}
</CardContent>
</Card>
))}
</div>
);
}