Skip to content

Fix leaderboard placeholder to prevent horizontal layout shift #5414

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Copilot wants to merge 7 commits into from
+22 −6
Closed

Fix leaderboard placeholder to prevent horizontal layout shift #5414

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
88a94fb
Initial plan
Copilot Jan 29, 2026
0bf52ab
Fix layout shift by updating placeholder height from 27px to 48px
Copilot Jan 29, 2026
a6cf4b5
Apply prettier formatting to LeaderboardList
Copilot Jan 29, 2026
14ac774
Update placeholder height to h-14 (56px) to accommodate all leaderboa…
Copilot Jan 29, 2026
23b7029
Replace simple placeholder with structured placeholder matching actua…
Copilot Jan 30, 2026
c0acdf7
Refine placeholder structure to match actual DOM hierarchy
Copilot Jan 30, 2026
ab5c509
Fix spacing to exactly match actual leaderboard items (min-w-14, min-…
Copilot Jan 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 22 additions & 6 deletions packages/shared/src/components/cards/Leaderboard/LeaderboardList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import type { ReactElement, ReactNode } from 'react';
import React from 'react';
import { LeaderboardListContainer } from './LeaderboardListContainer';
import type { LeaderboardListContainerProps } from './common';
import classed from '../../../lib/classed';
import { ElementPlaceholder } from '../../ElementPlaceholder';

export interface CommonLeaderboardProps<T extends Iterable<unknown>>
Expand All @@ -17,9 +16,25 @@ export interface LeaderboardListProps {
concatScore?: boolean;
}

const PlaceholderList = classed(
ElementPlaceholder,
'h-[1.6875rem] my-1.5 rounded-12',
const LeaderboardPlaceholderItem = (): ReactElement => (
<li>
<div className="flex w-full flex-row items-center rounded-8 px-2">
{/* Score placeholder - matches LeaderboardListItem span (min-w-14) */}
<ElementPlaceholder className="inline-flex h-4 min-w-14 justify-center rounded-6" />
{/* Emoji placeholder - matches UserTopList emoji span (min-w-8 pl-1) */}
<ElementPlaceholder className="h-6 w-6 min-w-8 rounded-6 pl-1" />
{/* UserHighlight wrapper equivalent (p-2) */}
<div className="flex min-w-0 flex-shrink flex-row items-center p-2">
{/* Profile image placeholder */}
<ElementPlaceholder className="h-8 w-8 rounded-10" />
{/* Text content placeholder (ml-2) */}
<div className="ml-2 flex flex-1 flex-col gap-1">
<ElementPlaceholder className="h-3 w-24 rounded-6" />
<ElementPlaceholder className="h-2.5 w-16 rounded-6" />
</div>
</div>
</div>
</li>
);

export function LeaderboardList({
Expand All @@ -29,8 +44,9 @@ export function LeaderboardList({
}: LeaderboardListProps): ReactElement {
return (
<LeaderboardListContainer {...containerProps}>
{/* eslint-disable-next-line react/no-array-index-key */}
{isLoading && [...Array(10)].map((_, i) => <PlaceholderList key={i} />)}
{isLoading &&
/* eslint-disable-next-line react/no-array-index-key */
[...Array(10)].map((_, i) => <LeaderboardPlaceholderItem key={i} />)}
{children}
</LeaderboardListContainer>
);
Expand Down