[UI/UX Design] Design loading and skeleton states for the InvestorDiscovery cards

[thlpkee20-wq]

Description

This is a UI/UX design task to design loading/skeleton states for the offering grid in InvestorDiscovery. The cards currently render static placeholder data with no loading treatment. Design skeletons that match the final card layout to reduce perceived load time and layout shift.

Requirements and context

• Must be accessible (WCAG 2.1 AA), responsive, and documented in the design system
• Should be consistent with existing patterns and easy to review
• Relevant code: src/components/InvestorDiscovery.tsx, src/index.css
• Skeletons must respect reduced motion and announce loading status to assistive tech

Suggested execution

• Fork the repo and create a branch
• git checkout -b uiux/discovery-skeletons
• Implement changes
  • Design card skeletons matching the redesigned card structure
  • Define a shimmer/pulse treatment with a reduced-motion fallback
  • Design the loading→loaded and loading→empty transitions
• Validate accessibility and responsive assumptions

Test and commit

• Run checks
  • npm run lint and component/visual tests
• Cover edge cases
  • 1/2/3-column grids, reduced motion, loading announcement, layout-shift prevention, contrast
• Include screenshots/before-after and accessibility (axe) notes

Example commit message

design: discovery loading skeleton states

Guidelines

• Minimum 95 percent test coverage
• Clear documentation
• Timeframe: 96 hours