FROTNEND: Real-Time Leaderboard with Virtualized List

[PoulavBhowmick03]

Description
Optimized leaderboard with WebSocket updates and virtual scrolling.

Acceptance Criteria:

1. Virtualized list handling 10k+ entries
2. Smooth position change animations
3. Custom ranking indicators:
   • ▲/▼ arrows for position changes
   • Highlight user's entry with border
     . CSV export button (admin only)

Technical Details:

// components/Leaderboard.tsx
import { useWebSocket } from 'react-use-websocket';
import { VariableSizeList as List } from 'react-window';

export default function Leaderboard() {
  const { lastMessage } = useWebSocket(WS_URL, {
    shouldReconnect: () => true,
  });

  const rowRenderer = ({ index, style }: ListChildComponentProps) => (
    <div style={style} className={css.row}>
      <RankChange delta={data[index].change} />
      <TeamName name={data[index].teamName} />
      <Points value={data[index].points} />
    </div>
  );

  return (
    <List
      height={600}
      itemCount={data.length}
      itemSize={index => (data[index].isUser ? 80 : 50)}
      width="100%"
    >
      {rowRenderer}
    </List>
  );
}

Notes:

• Use react-window for virtualization
• Implement WebSocket message batching
• Add custom scrollbar styling

---