Background: The investor dashboard loads position data asynchronously but shows a blank screen while fetching. Skeleton screens improve perceived performance.
What "done" looks like:
app/dashboard/investor/ renders skeleton variants of StatCard, PortfolioDonut, and the positions table while data loads
- Skeletons match the dimensions of the real content to prevent layout shift
- Use existing
skeleton.tsx primitives
Key files: app/dashboard/investor/, components/ui/skeleton.tsx, components/dashboard/PortfolioDonut.tsx
Constraints:
- Skeletons must be screen-reader friendly (use
aria-busy on containers)
- Loading state must time out after 30s and show an error state
PR must include: Skeleton wiring + aria attributes + Storybook story for loading state.
Background: The investor dashboard loads position data asynchronously but shows a blank screen while fetching. Skeleton screens improve perceived performance.
What "done" looks like:
app/dashboard/investor/renders skeleton variants ofStatCard,PortfolioDonut, and the positions table while data loadsskeleton.tsxprimitivesKey files:
app/dashboard/investor/,components/ui/skeleton.tsx,components/dashboard/PortfolioDonut.tsxConstraints:
aria-busyon containers)PR must include: Skeleton wiring + aria attributes + Storybook story for loading state.