Skip to content

feat(prices): replace spinner with skeleton placeholder during price load (closes #313) - #332

Open
ghzhost wants to merge 1 commit into
SmartDropLabs:mainfrom
ghzhost:feat/prices-page-skeleton-loading-313
Open

feat(prices): replace spinner with skeleton placeholder during price load (closes #313)#332
ghzhost wants to merge 1 commit into
SmartDropLabs:mainfrom
ghzhost:feat/prices-page-skeleton-loading-313

Conversation

@ghzhost

@ghzhost ghzhost commented Sep 5, 2026

Copy link
Copy Markdown

Summary

This PR resolves issue #313 by introducing a structured skeleton loader placeholder for the price card on /prices while data is loading.

Changes

  • Replaced the centered <Spinner /> on /prices during isLoading with a <Box> card layout mirroring the resolved price card dimensions.
  • Uses Chakra UI <Skeleton /> components configured with startColor="app.border" and endColor="app.surfaceHover" to match the design system tokens across other views (/farm, TvlChart).
  • Added data-testid="price-skeleton-loader" for testing and verification.
  • Eliminates layout shift (CLS) between initial load / query execution and price display.

Verification

  • Verified npm run build succeeds without type errors or linting regressions.
  • Verified visual structure matches resolved price card (header badge, large price line, source metadata, attempted sources lines).

Closes #313

@netlify

netlify Bot commented Sep 5, 2026

Copy link
Copy Markdown

Deploy Preview for spiffy-melomakarona-eb1e8a ready!

Name Link
🔨 Latest commit 236d2ad
🔍 Latest deploy log https://app.netlify.com/projects/spiffy-melomakarona-eb1e8a/deploys/6a9b8a3480d8410007dd2cf1
😎 Deploy Preview https://deploy-preview-332--spiffy-melomakarona-eb1e8a.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented Sep 5, 2026

Copy link
Copy Markdown

Deploy Preview for smart-drop ready!

Name Link
🔨 Latest commit 236d2ad
🔍 Latest deploy log https://app.netlify.com/projects/smart-drop/deploys/6a9b8a3416ab460008d4d943
😎 Deploy Preview https://deploy-preview-332--smart-drop.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

No loading state or skeleton for prices page chart

1 participant