From 3b32f03bafddb46edd508c6d79ba6b344388297c Mon Sep 17 00:00:00 2001
From: Dylan Audius <dylan@audius.co>
Date: Fri, 15 May 2026 18:04:50 -0700
Subject: [PATCH] fix(web): contest skeleton title block reads as text, not a
 slab
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The skeleton on the Explore Contests row reserved the right vertical
space (64px) but filled the whole title area with a single solid
80%-wide grey bar, which read as a much heavier element than the 1–2
lines of heading text that eventually replace it. Split the
placeholder into two stacked bars sized to the real heading line-height
(grid: 22px x 2, hero: 28px x 2), still centered inside the same
reserved 64/80px block so the resolved card lands at the same height
with no layout shift.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../components/contest-card/ContestCard.tsx   | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

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 (
     <Paper
       direction='column'
@@ -213,7 +216,15 @@ export const ContestCardSkeleton = (
         </Flex>
         <Divider orientation='horizontal' />
         <Flex direction='column' gap='s'>
-          <Skeleton h={titleBlockHeight} w='80%' />
+          <Flex
+            direction='column'
+            gap='s'
+            justifyContent='center'
+            css={{ height: titleBlockHeight }}
+          >
+            <Skeleton h={titleLineHeight} w='80%' />
+            <Skeleton h={titleLineHeight} w='55%' />
+          </Flex>
           <Flex gap='s'>
             <Skeleton h={22} w={72} />
           </Flex>