skeleton loading and error boundaries for the invoice marketplace

[mikewheeleer]

Summary

The invoice marketplace shows a blank flash while loading and a whole-page crash when a subtree throws. Add skeleton placeholders and scoped error boundaries so failures are contained and loading is graceful.

Why this matters

Blank flashes and full-page crashes are jarring and lose user context. Skeletons + boundaries keep the app resilient and calm.

Requirements

• Add skeleton placeholders matching the invoice marketplace layout during load.
• Wrap independent invoice marketplace subtrees in error boundaries with a retry.
• A crash in one subtree doesn't take down the rest of the page.
• Announce loading to assistive tech; no layout shift.

Technical guidance

• Match skeleton dimensions to real content to avoid shift.
• Log the boundary error for observability.

Edge cases — each must have a test

• loading -> skeleton, then content
• subtree throws -> only that section shows the error
• retry -> re-renders the section
• no layout shift on swap
• loading announced

Acceptance criteria

• All requirements and every edge case above implemented and covered by tests
• New unit and integration tests; existing tests still pass and no regressions
• Structured, typed errors (no leaked internals; stable codes)
• npm run lint, npm test, and npm run build all pass locally
• Code follows the repo's existing conventions; no duplication or dead code
• Short docs/comments explaining the design and any non-obvious decisions
• PR description explains the approach and includes Closes #<issue>

Out of scope

• Global crash reporting UI
• Server components migration

Rewards

Part of the GrantFox OSS / Official Campaign (FWC26) — this task may be rewarded. PR quality is assessed by AI: depth, correctness under edge cases, meaningful tests, and clean design are what earn the reward. Shallow changes (typos, formatting, trivial docs) do not qualify.

[chuks68]

I would like to work on this issue because i am confident i can resolve the issue, having worked on and resolved similar issues. my eta is 4 hours

[guptakumarranjeet150]

Hi everyone,

I would love to take this on. My planned approach:

• Build skeleton loading and error boundaries for the invoice marketplace with clean React/Next.js components, responsive styling, and proper loading/error boundaries.
• Add component unit tests and ensure zero TypeScript/ESLint warnings.

Looking forward to contributing—please feel free to assign!