diff --git a/packages/web/src/components/contest-card/ContestCard.tsx b/packages/web/src/components/contest-card/ContestCard.tsx index 8f137b685ac..8ab247d00c9 100644 --- a/packages/web/src/components/contest-card/ContestCard.tsx +++ b/packages/web/src/components/contest-card/ContestCard.tsx @@ -188,11 +188,14 @@ export const ContestCardSkeleton = ( // doesn't pop in shorter than the resolved card. Hero rows render // heading/l (line-height 40) and grid rows render heading/m // (line-height 32); both clamp to two lines, giving an 80 / 64 px - // title block respectively. Earlier iterations rendered a single 28px - // line, which was the source of the "skeleton loader is the wrong - // size on the explore page" QA pass. + // title block respectively. The title placeholder is rendered as two + // stacked bars sized to the real heading text rather than a single + // solid block — same reserved height, but visually reads as text + // instead of looming as a single dense rectangle the way the earlier + // 64px slab did on the explore grid. const variant = props.variant ?? 'grid' const titleBlockHeight = variant === 'hero' ? 80 : 64 + const titleLineHeight = variant === 'hero' ? 28 : 22 return ( - + + + +