Skip to content

fix: match skeleton loader sizes to loaded content - #665

Merged
ritaifeoluwa merged 1 commit into
SmartDropLabs:mainfrom
Dove1010:fix/skeleton-size-mismatch
Oct 20, 2026
Merged

ritaifeoluwa merged 1 commit into
SmartDropLabs:mainfrom
Dove1010:fix/skeleton-size-mismatch

Conversation

@Dove1010

Copy link
Copy Markdown

Skeletons used fixed heights that didn't match the content they stood in for, causing layout shift when data arrived.

  • TvlChart: use a responsive CSS height shared by the skeleton, empty state and chart instead of useBreakpointValue, whose "sm" fallback rendered the skeleton at 180px before jumping to 140px on phones.
  • PoolDetailClient: wrap the real stat value and pool title in Skeleton so they size to the text's line box; render the earnings placeholder as the same row of StatCards; render depositor placeholder rows inside the real table instead of taller standalone bars.
  • Contributors: set skeleton heights to the loaded text line heights.

Closes #639
Closes #646
Closes #637
Closes #637
Closes #638
Closes #636

Skeletons used fixed heights that didn't match the content they stood in
for, causing layout shift when data arrived.

- TvlChart: use a responsive CSS height shared by the skeleton, empty
  state and chart instead of useBreakpointValue, whose "sm" fallback
  rendered the skeleton at 180px before jumping to 140px on phones.
- PoolDetailClient: wrap the real stat value and pool title in
  Skeleton so they size to the text's line box; render the earnings
  placeholder as the same row of StatCards; render depositor placeholder
  rows inside the real table instead of taller standalone bars.
- Contributors: set skeleton heights to the loaded text line heights.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@netlify

netlify Bot commented Oct 19, 2026 •

Copy link
Copy Markdown

❌ Deploy Preview for spiffy-melomakarona-eb1e8a failed.

Name Link
🔨 Latest commit 68cb075
🔍 Latest deploy log https://app.netlify.com/projects/spiffy-melomakarona-eb1e8a/deploys/6ad57f9243409751d6887419

@drips-wave

drips-wave Bot commented Oct 19, 2026

Copy link
Copy Markdown

@Dove1010 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@netlify

netlify Bot commented Oct 19, 2026 •

Copy link
Copy Markdown

❌ Deploy Preview for smart-drop failed.

Name Link
🔨 Latest commit 68cb075
🔍 Latest deploy log https://app.netlify.com/projects/smart-drop/deploys/6ad57f9275e4cdf7d8a0a717

@ritaifeoluwa
ritaifeoluwa merged commit 40d2c5b into SmartDropLabs:main Oct 20, 2026
0 of 8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

2 participants