Design distinct empty, loading, and error variants for the MarketplacePage results grid

[greatest0fallt1me]

Description

This is a UI/UX issue. MarketplacePage.tsx today shows a generic empty state regardless of cause (no results vs. filter-too-tight vs. network error). Design three distinct variants — empty (no APIs), filtered-empty (filters too narrow), and error (fetch failed) — each with the right illustration tone, headline, body, and primary action.

Requirements and Context

• Reference: src/pages/MarketplacePage.tsx, src/components/EmptyState.tsx, src/components/ServerError.tsx
• Filtered-empty must show "Clear all filters" as the primary action
• Network error must show "Retry" + link to status page
• All three must share spacing/typography so the page does not jump visually between states
• Must be secure, tested, and documented
• Should be efficient and easy to review

Suggested Execution

1. Fork the repo and create a branch

   git checkout -b feature/marketplace-state-variants

2. Implement changes
   • src/components/EmptyState.tsx — extend to accept variant: 'empty' | 'filtered' | 'error'
   • src/pages/MarketplacePage.tsx — pick variant from apis.length, hasActiveFilters, fetchError
   • Add three small inline SVG illustrations sharing one stroke style
3. Test and commit
   • Simulate each state and screenshot for the PR
   • Tab into each state and verify the CTA is the first focusable

Example commit message

feat: differentiate MarketplacePage empty/filtered/error states

Acceptance Criteria

• Three variants render distinctly with consistent layout
• Filtered-empty wires "Clear all filters" to existing handler
• Error variant exposes a "Retry" button that retriggers fetch
• All illustrations are aria-hidden and decorative only

Guidelines

• Match copy tone from docs/UI-Design-System.md (concise, action-first)
• Keep illustrations under 8KB each, inline SVG only
• Clear documentation and inline comments
• Timeframe: 96 hours

[gloskull]

Hi, I’d love to work on this issue. I have 4 years of experience across backend, frontend, full-stack, and smart contract development. I understand the task clearly and can deliver a clean, efficient, well-tested solution on time, with strong focus on code quality and maintainability. My PR will be submitted in under 10 hours.

[kodinaka30-ship-it]

@kodinaka30-ship-it has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hello Maintainer,

I'd like to work on this because stale access after a whitelist removal is a real security gap if the carrier can still call blocked paths even briefly, the whitelist check isn't actually trustworthy. I'm comfortable building the fixture to remove a whitelisted carrier, re-running the previously allowed call path to confirm it's now blocked, and verifying storage/lookup state reflects the removal with no leftover stale entries. I'll run cargo fmt, cargo clippy -D warnings, cargo test, and the wasm release build to confirm everything passes cleanly before submitting.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @kodinaka30-ship-it to this issue.

[drips-wave]

Congratulations, @kodinaka30-ship-it! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on June 30, 2026.

🧑‍💻 @kodinaka30-ship-it: 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 🌊

[kodinaka30-ship-it]

Hello maintainer,

I completed and submitted Issue #151. Unfortunately, I forgot to include the issue reference keyword (such as "Close #151") in the PR description but on comment, so the Wave/Drips system is showing "No PR linked."

Since the PR has already been merged, I can no longer edit the description myself. Could you please manually link the PR to the issue if possible?

Thank you.