Add empty/loading states and accessible logo alt text to leaderboard ProjectsPodium

[Jagadeeshftw]

📌 Description

ProjectsPodium (src/features/leaderboard/components/ProjectsPodium.tsx) renders the top-3 projects but has no empty/loading state when topThree is missing, uses empty alt="" on project logos, and gives trophy/medal icons no accessible labels.

💡 Why it matters: Missing data breaks the podium and screen readers get no project/medal context.

🧩 Requirements and context

• Render a skeleton/loading and an empty state when topThree is unavailable.
• Provide meaningful alt text (project name) on logos and labels on rank icons.
• Add a broken-logo fallback.

Non-functional requirements

• 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 a11y/projectspodium

2. Implement changes

• Write/modify the relevant source: src/features/leaderboard/components/ProjectsPodium.tsx
• Write comprehensive tests: src/features/leaderboard/components/ProjectsPodium.test.tsx
• Add documentation: inline TSDoc
• Include TSDoc doc comments
• Validate security assumptions: n/a

3. Test and commit

• Run tests:

npm run test

• Cover edge cases: empty topThree, broken logo, fewer than 3 projects
• Include test output and security notes in the PR description.

Example commit message

feat(leaderboard): podium empty/loading states + accessible logos

✅ Acceptance criteria

• Empty + loading states present
• Logos have meaningful alt; rank icons labeled
• Broken-logo fallback
• Tests cover empty/broken/partial

🔒 Security notes

None.

📋 Guidelines

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

[ekwe7]

I'd love to take on this issue. I have experience building production-ready applications and contributing through GitHub workflows. I'll deliver a reliable, well-tested solution with clean, maintainable code

[Glam26]

I'd love to work on this issue.

I enjoy tackling infrastructure and reliability-focused tasks, and this combines both in a way that's interesting. My approach will be to keep the implementation simple, well-documented, and easy to maintain while ensuring the acceptance criteria are fully covered.

I'll provide clear commits, tests for critical paths and edge cases, and regular progress updates throughout development.

[Glam26]

I'd love to work on this issue.

I enjoy tackling infrastructure and reliability-focused tasks, and this combines both in a way that's interesting. My approach will be to keep the implementation simple, well-documented, and easy to maintain while ensuring the acceptance criteria are fully covered.

I'll provide clear commits, tests for critical paths and edge cases, and regular progress updates throughout development.

[Glam26]

I'd love to work on this issue.

I enjoy tackling infrastructure and reliability-focused tasks, and this combines both in a way that's interesting. My approach will be to keep the implementation simple, well-documented, and easy to maintain while ensuring the acceptance criteria are fully covered.

I'll provide clear commits, tests for critical paths and edge cases, and regular progress updates throughout development.

[444notdotun]

Hi,

With 4 years of hands-on experience across backend, frontend, and smart contract development, I'm confident I can complete this task quickly and to a high standard. I've reviewed the requirements in detail and fully understand what's needed.

My focus is on writing clean, efficient, and maintainable code backed by thorough testing and industry best practices. I'll ensure the solution is production-ready and delivered on time.

I expect to have my PR ready in less than 10 hours.

[Johnpii1]

Hello Sir,

I came across your project and I’m really interested in contributing.

I have experience with React for building responsive, user-friendly interfaces, and I’m also familiar with smart contracts and blockchain basics. I focus on writing clean, scalable code and improving user experience.

I’m a fast learner and ready to get started immediately. Please let me know the next steps.

Thank you.

Best regards,
Johnpaul

[leocagli]

Interested in picking this up. Please assign me.