fix(mint): match Add Mints search skeleton to real result rows#228
Open
Kelbie wants to merge 2 commits into
Open
fix(mint): match Add Mints search skeleton to real result rows#228Kelbie wants to merge 2 commits into
Kelbie wants to merge 2 commits into
Conversation
The Add Mints loading skeleton was a hand-rolled card layout that had drifted from the real result row (different card chrome, avatar size, padding, and missing the subtitle, stats accent, and checkbox), so content jumped when search data arrived. Render the skeleton through the SAME List + ContactRow path as real rows (in loading mode) so the container chrome is shared and can't drift, and close the one real height gap in ContactRow's loading state. - MintAddScreen: delete the hand-rolled LoadingMintsList; feed the result List skeleton placeholders during the initial search and render them via MintItem in loading mode (one List, shared header/padding). - ContactRow: reserve the inline stats-accent height while loading (gated to mint / explicit-stats rows so contact/ble/geohash skeletons are unaffected) and render an inert 24px box for the checkbox slot. - RowStatsAccent: add co-located RowStatsAccentSkeleton so accent geometry lives in one place and can't drift between loading and loaded states. - add ContactRow loading-reservation tests (accent + checkbox + gate).
The loading accent used a fixed 14px bar, which under-shot the real pill's text line box (Text size 12 ≈ 16px) by a couple of pixels, so skeleton rows sat slightly shorter than real rows and content still nudged on the swap. Mirror the real pill structure instead of guessing a height: a 12px icon box + a `Text loading` at the same size/bold, which self-sizes to the exact real line box. Accent line height is now identical loading vs loaded.
This was referenced Jun 22, 2026
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
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.
Why
The Add Mints search (
features/mint/screens/MintAddScreen.tsx) showed a loading skeleton that looked nothing like the real result row, and the height difference made content jump when search data arrived. The skeleton was a hand-rolledLoadingMintsListthat had drifted from the realMintItem→ContactRowrow: arounded-2xlcard the real row doesn't have, avatar 42 vs 44, padding 16 vs 20h/12v, and missing the domain subtitle, the inline stats accent, and the checkbox.This is the drift-from-duplicated-chrome anti-pattern. The fix follows the established "share the chrome" convention (
PostCardGutterHeader): render skeleton and real states from the same component so heights can't diverge.What
LoadingMintsList; feed the resultListskeleton placeholders during the initial search and render them through the sameMintItem→ContactRowpath in loading mode. OneList, so the header spacer / padding / container chrome are shared for free.getItemTypekeeps skeleton and real rows in separate recycle pools.RowStatsAccentSkeletonso the accent's geometry lives in one file and can't drift between loading and loaded.__tests__/contactRowLoadingReservation.test.tsx: accent reserved for loading mint rows, not for loading nostr rows (gate proof), and the inert-checkbox/live-checkbox swap.Height parity
Every height-contributing element of the real row is now reserved at the same dimensions by the same component (avatar 44, title bar, subtitle bar, accent pill row, 24px checkbox). The only previously-lost contributor was the accent; it's now reserved.
Notes
spike/flashlist-v2-thread(PR Replace @legendapp/list with FlashList v2 app-wide #227 / FlashList), which is where the screen uses the shared<List>seam. Merge after Replace @legendapp/list with FlashList v2 app-wide #227.selectable + loading. No-op for plain contact skeletons;SearchResultRowsis unaffected..shift.events on the load→data swap and tune the skeleton pill height to the measured real-accent height vianpx tsx codereview/log-doctor/index.ts timeline --event 'visual\.layout|\.shift\.' --latest.Gates
tscclean · eslint 0 errors on changed files ·npx jest contactRow4/4 pass · knip flags no new dead exports.