Skip to content

Commit 7d25dce

Browse files
runway-github[bot]juanmigdr
runway-github[bot]
and
juanmigdr
authored
chore(runway): cherry-pick fix: explore search shows count on loading state cp-7.79.0 (#30625)
- fix: explore search shows count on loading state cp-7.79.0 (#30618) <!-- Please submit this PR as a draft initially. Do not mark it as "Ready for review" until this PR meets the canonical Definition of Ready For Review in `docs/readme/ready-for-review.md`. In short: the template must be materially complete (not just section titles present), all status checks must be currently passing, and the only expected follow-up commits must be reviewer-driven. --> ## **Description** Fix explore search shows count on loading state <!-- Write a short description of the changes included in this pull request, also include relevant motivation and context. Have in mind the following questions: 1. What is the reason for the change? 2. What is the improvement/solution? --> ## **Changelog** <!-- If this PR is not End-User-Facing and should not show up in the CHANGELOG, you can choose to either: 1. Write `CHANGELOG entry: null` 2. Label with `no-changelog` If this PR is End-User-Facing, please write a short User-Facing description in the past tense like: `CHANGELOG entry: Added a new tab for users to see their NFTs` `CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker` (This helps the Release Engineer do their job more quickly and accurately) --> CHANGELOG entry: fix explore search shows count on loading state ## **Related issues** Fixes: https://consensyssoftware.atlassian.net/browse/ASSETS-3266 ## **Manual testing steps** ```gherkin Feature: my feature name Scenario: user [verb for user action] Given [describe expected initial app state] When user [verb for user action] Then [describe expected outcome] ``` ## **Screenshots/Recordings** <!-- If applicable, add screenshots and/or recordings to visualize the before and after of your change. --> ### **Before** <!-- [screenshots/recordings] --> ### **After** <!-- [screenshots/recordings] --> ## **Pre-merge author checklist** <!-- Every checklist item must be consciously assessed before marking this PR as "Ready for review". A checked box means you deliberately considered that responsibility, not that you literally performed every action listed. Unchecked boxes are ambiguous: they are not an implicit "N/A" and they are not a silent "skip". See `docs/readme/ready-for-review.md` for the full checklist semantics. --> - [ ] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [ ] I've completed the PR template to the best of my ability - [ ] I've included tests if applicable - [ ] I've documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [ ] I've applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. #### Performance checks (if applicable) - [ ] I've tested on Android - Ideally on a mid-range device; emulator is acceptable - [ ] I've tested with a power user scenario - Use these [power-user SRPs](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/edit-v2/401401446401?draftShareId=9d77e1e1-4bdc-4be1-9ebb-ccd916988d93) to import wallets with many accounts and tokens - [ ] I've instrumented key operations with Sentry traces for production performance metrics - See [`trace()`](/app/util/trace.ts) for usage and [`addToken`](/app/components/Views/AddAsset/components/AddCustomToken/AddCustomToken.tsx#L274) for an example For performance guidelines and tooling, see the [Performance Guide](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/400085549067/Performance+Guide+for+Engineers). ## **Pre-merge reviewer checklist** <!-- Reviewer checklist items follow the same semantics as the author checklist: an unchecked box is ambiguous, a checked box means the reviewer consciously assessed that responsibility. See `docs/readme/ready-for-review.md`. --> - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. <!-- CURSOR_SUMMARY --> --- > [!NOTE] > **Low Risk** > UI-only label logic in explore search with unit tests; no auth, data, or API behavior changes. > > **Overview** > Fixes explore search section headers showing a **“View X more”** count while results are still loading. > > `ExploreSearchResultsV2` now computes the view-more label with **zero visible items** and **no server total** when `section.isLoading` is true, so counts from the previous query are not reused alongside skeleton rows. The label and accessibility text share one computed `viewMoreLabel`. Tests lock in that all feed types get **`trending.view_all`** for that loading input. > > <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit 353964d. Bugbot is set up for automated code reviews on this repo. Configure [here](https://www.cursor.com/dashboard/bugbot).</sup> <!-- /CURSOR_SUMMARY --> [92f7832](92f7832) Co-authored-by: Juanmi <95381763+juanmigdr@users.noreply.github.com>
1 parent 0f6810a commit 7d25dce

2 files changed

Lines changed: 58 additions & 38 deletions

File tree

‎app/components/Views/TrendingView/search/ExploreSearchResultsV2.tsx‎

Lines changed: 44 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -95,46 +95,52 @@ const ExploreSearchResultsV2: React.FC<ExploreSearchResultsV2Props> = ({
9595
);
9696

9797
const renderSectionHeader = useCallback(
98-
(item: ListItemHeader, section: SearchFeedSection) => (
99-
<Box
100-
flexDirection={BoxFlexDirection.Row}
101-
alignItems={BoxAlignItems.Center}
102-
justifyContent={BoxJustifyContent.Between}
103-
twClassName="py-2 bg-default"
104-
>
105-
<Text
106-
variant={TextVariant.HeadingSm}
107-
fontWeight={FontWeight.Medium}
108-
twClassName="text-alternative"
109-
>
110-
{item.title}
111-
</Text>
112-
<Pressable
113-
onPress={() => handleViewMore(section)}
114-
hitSlop={8}
115-
accessibilityRole="button"
116-
accessibilityLabel={`${getViewMoreLabel(section.feedId, section.items.length, searchQuery, section.total)} ${item.title}`}
117-
style={({ pressed }) => [
118-
pressedStyle.pressable,
119-
pressed && { opacity: 0.5 },
120-
]}
98+
(item: ListItemHeader, section: SearchFeedSection) => {
99+
const viewMoreLabel = getViewMoreLabel(
100+
section.feedId,
101+
section.isLoading ? 0 : section.items.length,
102+
searchQuery,
103+
section.isLoading ? undefined : section.total,
104+
);
105+
return (
106+
<Box
107+
flexDirection={BoxFlexDirection.Row}
108+
alignItems={BoxAlignItems.Center}
109+
justifyContent={BoxJustifyContent.Between}
110+
twClassName="py-2 bg-default"
121111
>
122-
<Text variant={TextVariant.BodyMd} color={TextColor.TextAlternative}>
123-
{getViewMoreLabel(
124-
section.feedId,
125-
section.items.length,
126-
searchQuery,
127-
section.total,
128-
)}
112+
<Text
113+
variant={TextVariant.HeadingSm}
114+
fontWeight={FontWeight.Medium}
115+
twClassName="text-alternative"
116+
>
117+
{item.title}
129118
</Text>
130-
<Icon
131-
name={IconName.ArrowRight}
132-
size={IconSize.Sm}
133-
color={IconColor.IconAlternative}
134-
/>
135-
</Pressable>
136-
</Box>
137-
),
119+
<Pressable
120+
onPress={() => handleViewMore(section)}
121+
hitSlop={8}
122+
accessibilityRole="button"
123+
accessibilityLabel={`${viewMoreLabel} ${item.title}`}
124+
style={({ pressed }) => [
125+
pressedStyle.pressable,
126+
pressed && { opacity: 0.5 },
127+
]}
128+
>
129+
<Text
130+
variant={TextVariant.BodyMd}
131+
color={TextColor.TextAlternative}
132+
>
133+
{viewMoreLabel}
134+
</Text>
135+
<Icon
136+
name={IconName.ArrowRight}
137+
size={IconSize.Sm}
138+
color={IconColor.IconAlternative}
139+
/>
140+
</Pressable>
141+
</Box>
142+
);
143+
},
138144
[handleViewMore, searchQuery],
139145
);
140146

‎app/components/Views/TrendingView/search/viewMoreLabel.test.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,20 @@ describe('getViewMoreLabel', () => {
6262
});
6363
});
6464

65+
describe('loading state — component passes 0 items and no serverTotal', () => {
66+
// When a section is loading, ExploreSearchResultsV2 passes visibleCount=0 and
67+
// serverTotal=undefined so that stale data from the previous query does not
68+
// produce a "View X more" count while skeletons are shown.
69+
it.each(['perps', 'stocks', 'sites', 'tokens', 'predictions'] as const)(
70+
'%s: returns "view_all" during loading (0 items, no serverTotal)',
71+
(feedId) => {
72+
expect(getViewMoreLabel(feedId, 0, 'eth', undefined)).toBe(
73+
'trending.view_all',
74+
);
75+
},
76+
);
77+
});
78+
6579
describe('server total provided (tokens and predictions with API count)', () => {
6680
it('returns "view_x_more" using total when there are remaining results', () => {
6781
// total: 2101, visible: 3 → extra = 2101 - 3 = 2098

0 commit comments

Comments
 (0)