Skeleton Loading States for Invoice Cards

[Kingsman-99]

Description

While the invoice list fetches data, users see a blank white region with no indication of progress, which feels like a broken page. Animated skeleton placeholders matching the shape of real invoice cards should occupy the list until data arrives.

Technical Context

src/components/invoice/InvoiceCardSkeleton.tsx (new) renders a gray animated placeholder using Tailwind's animate-pulse class for the title, amount, status badge, and recipient count areas. src/components/invoice/InvoiceList.tsx conditionally renders an array of eight skeleton cards when isLoading from src/hooks/useInvoices.ts is true. src/components/ui/Skeleton.tsx provides the base pulsing rectangle primitive used throughout the app.

Acceptance Criteria

• Eight skeleton cards render immediately while the first page of invoices loads
• Skeleton dimensions match the actual invoice card height and internal layout proportions
• Skeletons animate with a shimmer or pulse effect at approximately 60 fps with no layout shift
• When data resolves, skeleton cards are replaced by real cards without a visible flash
• If the fetch errors, skeletons are replaced by an error state, not left on screen indefinitely
• All CI checks (npm test, npm run build, ESLint/TypeScript) pass and the branch has no merge conflicts

---

[OMGO-Code]

@OMGO-Code has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hi Maintainer, I would like to work on this issue.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @OMGO-Code to this issue.

[SYMBAxx]

@SYMBAxx has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

i'd love to resolve this issue for you

ℹ️ Repo Maintainers: To accept this application, review their application or assign @SYMBAxx to this issue.

[drips-wave]

Congratulations, @SYMBAxx! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on July 30, 2026.

🧑‍💻 @SYMBAxx: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[drips-wave]

This issue has been completed by @SYMBAxx as part of the Stellar Wave Program's 7th Wave 🥳

😎 @SYMBAxx: You earned 200 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.