From 88a94fbc76b849b2fe5b108b56747d8200ba1309 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 29 Jan 2026 20:03:21 +0000 Subject: [PATCH 1/7] Initial plan From 0bf52ab18a757cc139c4648043ed7e1c4d41a198 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 29 Jan 2026 20:05:49 +0000 Subject: [PATCH 2/7] Fix layout shift by updating placeholder height from 27px to 48px Co-authored-by: omBratteng <1681525+omBratteng@users.noreply.github.com> --- .../shared/src/components/cards/Leaderboard/LeaderboardList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/shared/src/components/cards/Leaderboard/LeaderboardList.tsx b/packages/shared/src/components/cards/Leaderboard/LeaderboardList.tsx index 6b84d44c8b..2554e950d3 100644 --- a/packages/shared/src/components/cards/Leaderboard/LeaderboardList.tsx +++ b/packages/shared/src/components/cards/Leaderboard/LeaderboardList.tsx @@ -19,7 +19,7 @@ export interface LeaderboardListProps { const PlaceholderList = classed( ElementPlaceholder, - 'h-[1.6875rem] my-1.5 rounded-12', + 'h-12 my-1.5 rounded-12', ); export function LeaderboardList({ From a6cf4b5a05ae16707b5be7796385c9b91b73ca1d Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 29 Jan 2026 20:14:29 +0000 Subject: [PATCH 3/7] Apply prettier formatting to LeaderboardList Co-authored-by: omBratteng <1681525+omBratteng@users.noreply.github.com> --- .../src/components/cards/Leaderboard/LeaderboardList.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/shared/src/components/cards/Leaderboard/LeaderboardList.tsx b/packages/shared/src/components/cards/Leaderboard/LeaderboardList.tsx index 2554e950d3..efe3d7e1cc 100644 --- a/packages/shared/src/components/cards/Leaderboard/LeaderboardList.tsx +++ b/packages/shared/src/components/cards/Leaderboard/LeaderboardList.tsx @@ -17,10 +17,7 @@ export interface LeaderboardListProps { concatScore?: boolean; } -const PlaceholderList = classed( - ElementPlaceholder, - 'h-12 my-1.5 rounded-12', -); +const PlaceholderList = classed(ElementPlaceholder, 'h-12 my-1.5 rounded-12'); export function LeaderboardList({ containerProps, From 14ac774a18012f45ba8dcad10491c12e9d4b8de8 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 29 Jan 2026 20:18:02 +0000 Subject: [PATCH 4/7] Update placeholder height to h-14 (56px) to accommodate all leaderboard types Co-authored-by: omBratteng <1681525+omBratteng@users.noreply.github.com> --- .../shared/src/components/cards/Leaderboard/LeaderboardList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/shared/src/components/cards/Leaderboard/LeaderboardList.tsx b/packages/shared/src/components/cards/Leaderboard/LeaderboardList.tsx index efe3d7e1cc..062d66b0f5 100644 --- a/packages/shared/src/components/cards/Leaderboard/LeaderboardList.tsx +++ b/packages/shared/src/components/cards/Leaderboard/LeaderboardList.tsx @@ -17,7 +17,7 @@ export interface LeaderboardListProps { concatScore?: boolean; } -const PlaceholderList = classed(ElementPlaceholder, 'h-12 my-1.5 rounded-12'); +const PlaceholderList = classed(ElementPlaceholder, 'h-14 my-1.5 rounded-12'); export function LeaderboardList({ containerProps, From 23b702956e2c1ff12c29dfc9930f84922bff3937 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 30 Jan 2026 13:34:49 +0000 Subject: [PATCH 5/7] Replace simple placeholder with structured placeholder matching actual layout Co-authored-by: omBratteng <1681525+omBratteng@users.noreply.github.com> --- .../cards/Leaderboard/LeaderboardList.tsx | 22 +++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/packages/shared/src/components/cards/Leaderboard/LeaderboardList.tsx b/packages/shared/src/components/cards/Leaderboard/LeaderboardList.tsx index 062d66b0f5..efc3daeb3b 100644 --- a/packages/shared/src/components/cards/Leaderboard/LeaderboardList.tsx +++ b/packages/shared/src/components/cards/Leaderboard/LeaderboardList.tsx @@ -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> @@ -17,7 +16,21 @@ export interface LeaderboardListProps { concatScore?: boolean; } -const PlaceholderList = classed(ElementPlaceholder, 'h-14 my-1.5 rounded-12'); +const LeaderboardPlaceholderItem = (): ReactElement => ( +
  • + {/* Score placeholder */} + + {/* Emoji placeholder */} + + {/* Profile image placeholder */} + + {/* Text content placeholder */} +
    + + +
    +
    • +); export function LeaderboardList({ containerProps, @@ -26,8 +39,9 @@ export function LeaderboardList({ }: LeaderboardListProps): ReactElement { return ( - {/* eslint-disable-next-line react/no-array-index-key */} - {isLoading && [...Array(10)].map((_, i) => )} + {isLoading && + /* eslint-disable-next-line react/no-array-index-key */ + [...Array(10)].map((_, i) => )} {children} ); From c0acdf782d9c5d917ea31398616488894d1a84f9 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 30 Jan 2026 13:36:57 +0000 Subject: [PATCH 6/7] Refine placeholder structure to match actual DOM hierarchy Co-authored-by: omBratteng <1681525+omBratteng@users.noreply.github.com> --- .../cards/Leaderboard/LeaderboardList.tsx | 27 +++++++++++-------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/packages/shared/src/components/cards/Leaderboard/LeaderboardList.tsx b/packages/shared/src/components/cards/Leaderboard/LeaderboardList.tsx index efc3daeb3b..74329f9f84 100644 --- a/packages/shared/src/components/cards/Leaderboard/LeaderboardList.tsx +++ b/packages/shared/src/components/cards/Leaderboard/LeaderboardList.tsx @@ -17,17 +17,22 @@ export interface LeaderboardListProps { } const LeaderboardPlaceholderItem = (): ReactElement => ( -
  • - {/* Score placeholder */} - - {/* Emoji placeholder */} - - {/* Profile image placeholder */} - - {/* Text content placeholder */} -
    - - +
  • +
    + {/* Score placeholder */} + + {/* Emoji placeholder (min-w-8 pl-1) */} + + {/* UserHighlight wrapper equivalent (p-2) */} +
    + {/* Profile image placeholder */} + + {/* Text content placeholder (ml-2) */} +
    + + +
    +
    • ); From ab5c5092667b32851b8bd60d22779c3255817227 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 30 Jan 2026 13:44:36 +0000 Subject: [PATCH 7/7] Fix spacing to exactly match actual leaderboard items (min-w-14, min-w-8 pl-1) Co-authored-by: omBratteng <1681525+omBratteng@users.noreply.github.com> --- .../src/components/cards/Leaderboard/LeaderboardList.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/shared/src/components/cards/Leaderboard/LeaderboardList.tsx b/packages/shared/src/components/cards/Leaderboard/LeaderboardList.tsx index 74329f9f84..833b4834c3 100644 --- a/packages/shared/src/components/cards/Leaderboard/LeaderboardList.tsx +++ b/packages/shared/src/components/cards/Leaderboard/LeaderboardList.tsx @@ -19,10 +19,10 @@ export interface LeaderboardListProps { const LeaderboardPlaceholderItem = (): ReactElement => (
  • - {/* Score placeholder */} - - {/* Emoji placeholder (min-w-8 pl-1) */} - + {/* Score placeholder - matches LeaderboardListItem span (min-w-14) */} + + {/* Emoji placeholder - matches UserTopList emoji span (min-w-8 pl-1) */} + {/* UserHighlight wrapper equivalent (p-2) */}
    {/* Profile image placeholder */}