fix: keep leaderboard rank pages deterministic

[onyekachi66]

Closes #897

Description

This PR resolves an issue with the leaderboard rendering and state fetching to ensure that the leaderboard ranks remain deterministic and that application state remains consistent during edge cases like loading, network failures, retries, and concurrent tab selections.

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update
• Performance improvement
• Refactoring (no functional changes)
• Style/UI changes
• Test updates
• CI/CD changes
• Security improvements

Related Issues

Closes #123

Changes Made

Files Modified

• components/leaderboard/LeaderboardTable.tsx
• components/leaderboard/LeaderboardSection.tsx
• hooks/useLeaderboard.ts

Key Changes

• Deterministic Sorting: Added a secondary sort key (user.name) to LeaderboardTable for deterministic tie-breaking.
• Race Condition Prevention: Resolved race conditions in the useLeaderboard hook using a fetchIdRef to discard stale async requests.
• Data Hydration: Added useEffect to LeaderboardSection to actively fetch and update data upon activeTab changes.
• Permission Handling: Improved permission error handling to avoid exposing sensitive HTML payloads during 401/403 responses.

Testing

• Unit tests added/updated
• Integration tests added/updated
• Manual testing completed
• Cross-browser testing (if applicable)
• Mobile responsiveness tested (if applicable)
• Accessibility testing completed
• Performance testing (if applicable)

Test Coverage

• New code is covered by tests
• Existing tests still pass
• Test coverage meets project standards

Screenshots/Videos

(Not applicable as there are no visible UI/layout changes; changes are state-driven and logic-based)

Minimum screenshots for UI/design PRs

• Desktop default state
• Mobile default state
• One stressed state: error, empty, loading, success, validation, open menu, or open modal
• Focus-visible screenshot for the primary interactive element (required when focus behavior changed)
• Open overlay screenshot for modal, drawer, popover, select, or date picker (required when applicable)
• Quick actions closed and open states (required for toolbar, FAB, or bottom-sheet action changes)
• Keyboard-open mobile screenshot and desktop sticky state (required for sticky action panel changes)

Before

After

Pre-submission Checklist

Code Quality

• Code follows project style guidelines
• Self-review completed
• Code is self-documenting
• No console errors or warnings
• No linting errors
• No TypeScript errors (if applicable)

Functionality

• All tests pass
• Feature works as expected
• No breaking changes introduced
• Performance impact assessed

Documentation

• README updated (if applicable)
• Code comments added where necessary
• API documentation updated (if applicable)
• Changelog updated (if applicable)

Security & Accessibility

• Security considerations addressed
• Accessibility standards met
• No sensitive data exposed
• Input validation implemented

Breaking Changes

Breaking Changes:

• None

Migration Steps:

• N/A

Additional Notes

Dependencies

• No new dependencies added
• Dependencies updated (list changes)
• Security vulnerabilities addressed

Performance Impact

• No performance impact
• Performance improved (Stale fetch requests are successfully discarded saving render cycles)
• Performance impact documented

Browser/Device Support

• Tested on Chrome
• Tested on Firefox
• Tested on Safari
• Tested on Edge
• Tested on mobile devices

Labels

• bugfix
• frontend
• security

Reviewers

• Frontend team review
• Backend team review (if applicable)
• Design team review (if applicable)
• Security review (if applicable)

[drips-wave]

@onyekachi66 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

[vercel]

@onyekachi66 is attempting to deploy a commit to the Jagadeesh B's projects Team on Vercel.

A member of the Team first needs to authorize it.