[Frontend] Add Loading Skeleton & Error States to Leaderboard UI

[rishab11250]

Description

When a user visits the leaderboard page (frontend/leaderboard.html), the page currently renders an empty white screen while data is being fetched from the LeetCode API. If the fetch fails (network issue, API rate limit, server error), the page remains blank forever with no indication to the user that something went wrong or that they can retry.

This creates a poor user experience — visitors have no feedback about the page state and may assume the site is broken.

---

Proposed Solution

Phase 1 — Loading State (Skeleton UI)

1. In frontend/leaderboard.html, add skeleton placeholder rows inside the leaderboard container (10 animated shimmer rows).
2. In frontend/css/main.css, add .skeleton class with a CSS shimmer animation (@keyframes shimmer using background: linear-gradient + background-size + translateX).
3. In frontend/js/render.js, show skeleton on page load and hide it when renderLeaderboard() completes.

Phase 2 — Error State

1. In frontend/leaderboard.html, add a hidden error banner element with: an error icon, "Failed to load leaderboard" message, and a "Retry" button.
2. In frontend/js/render.js, wrap the fetch call in try/catch. On failure, hide the skeleton and show the error banner.
3. Wire the "Retry" button to re-trigger the initial data fetch.

Phase 3 — Empty State

1. If the API returns an empty array, show a "No leaderboard data yet" message instead of an empty table.

---

Acceptance Criteria

• Skeleton shimmer rows appear immediately on page load.
• Skeleton disappears gracefully once data is rendered (fade-out transition).
• Error banner with "Retry" button appears when fetch fails.
• Retry button re-fetches data and restores the loading/rendered state.
• Empty state message is shown when no data exists.
• All states work on both desktop and mobile viewports.
• Existing leaderboard functionality is unaffected.

---

Affected Files

• frontend/leaderboard.html
• frontend/css/main.css
• frontend/js/render.js

[github-actions]

Thank you for opening an issue.

Please review our CONTRIBUTING.md guidelines before getting started.

A maintainer will review this issue shortly. If you would like to work on the issue yourself, please leave a comment requesting assignment.

Issue Assignment Policy

• The issue creator is given the first priority to work on their issue.
• If the creator declines or does not request assignment, the issue will be assigned to others in the order of requests received.
• Please do not submit PRs or begin work until you are officially assigned.

Note: This project is currently maintained by a solo maintainer, so reviews, assignments, and responses may sometimes take a little time. Thanks for your patience.

[rishab11250]

I want to work on this

[jahnavigu]

Hi @codepvg, I am a GSSoC 2026 contributor! This UI enhancement for the leaderboard is awesome. If the author decides to pass on it, or if you're open to splitting the tasks (like handling the CSS shimmer/skeleton animations while they handle the JS rendering logic), I would love to be assigned or collaborate on this!