Fix home card layout stability during loading states - #2176
Merged
Conversation
…bled-looking CTA Three native home-screen fixes: 1. Cashback/Savings stat cards no longer change height when the amount loads. The skeleton was a fixed 32px (`h-8`) while the loaded amount's line box is taller, so the card shrank during loading and grew back. Both cards now reserve a shared fixed value height (STAT_VALUE_HEIGHT) for the skeleton and the loaded value, so they stay the same height in every state and match each other. 2. Cashback no longer re-shows its loader every few seconds. The card details query was polling every 5s (`refetchInterval: 5_000`). Card details (cashback totals, percentage) change rarely and the live card balance is already polled separately, so the interval is removed and staleTime raised to 60s. 3. The "Finish setting up" CTA no longer looks disabled. It used `bg-button-earning` (brand green at 20% opacity), which renders as a muted dark green on the dark modal background. Switched to the standard `variant="brand"` solid-green button used elsewhere in the app. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011pAKfpRFjbH5TJSfNimjJy
|
The latest updates on your projects. Learn more about Vercel for GitHub. 2 Skipped Deployments
|
2 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR fixes layout instability on the home screen where stat cards (Cashback and Savings) would shrink while loading and grow back once data resolved. The changes ensure consistent card heights across all states and reduce unnecessary polling of card details.
Key Changes
Fixed stat card height consistency: Added a fixed
STAT_VALUE_HEIGHTconstant to bothHomeCashbackCardandHomeSavingsStatCardthat applies to both the loading skeleton and loaded content. This prevents the cards from changing size during the loading transition.Improved skeleton and text alignment: Wrapped stat values in a container with
justifyContent: 'flex-end'and addedlineHeightstyling to ensure proper vertical alignment of both skeleton loaders and actual content.Reduced card details polling: Changed
cardDetailsQueryOptionsto use a 60-second stale time instead of 5-second polling. Card details (cashback totals, percentages, metadata) change infrequently and don't need constant polling. The live card balance is fetched separately via thecardBalancequery which continues to poll every 5 seconds.Simplified button styling: Updated the CTA button in
FinishSetupModalto use thevariant="brand"prop instead of inline style classes for better maintainability.Implementation Details
STAT_VALUE_HEIGHTis calculated asMath.round(fontSize(1.875) * 1.3)to match the font size with appropriate line height multiplierh-8class from skeletons since height is now controlled via inline styleshttps://claude.ai/code/session_011pAKfpRFjbH5TJSfNimjJy