Skip to content

Commit 290655d

Browse files
kirillzyuskokirillzyusko
authored
feat: migrate Skeleton component (predict scope) (#27370)
<!-- Please submit this PR as a draft initially. Do not mark it as "Ready for review" until the template has been completely filled out, and PR status checks have passed at least once. --> ## **Description** <!-- 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? --> Migrated `Skeleton` component to DSRN usage. ## **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: null ## **Related issues** Fixes: https://consensyssoftware.atlassian.net/browse/DSYS-274 ## **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** https://github.com/user-attachments/assets/33054167-dc21-41da-bc31-4849d69bfbb2 ### **After** https://github.com/user-attachments/assets/3b569e47-3c46-4113-8627-093f275098ee ## **Pre-merge author checklist** - [x] 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). - [x] I've completed the PR template to the best of my ability - [x] I've included tests if applicable - [x] I've documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] 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. ## **Pre-merge reviewer checklist** - [x] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [x] 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** > Low risk UI-only change that swaps Skeleton loader implementations in Predict screens; main risk is minor visual/regression differences and snapshot updates. > > **Overview** > Migrates Predict feature loading placeholders to the new DSRN-based `Skeleton` by updating imports across multiple Predict components (balance, headers, market cards, picks, buy/sell previews). > > Updates associated tests/mocks and refreshes Jest snapshots to match the new `Skeleton` render output (notably style prop shape/ordering). > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit e6c2d88. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY -->
1 parent 6cbb169 commit 290655d

20 files changed

Lines changed: 206 additions & 101 deletions

File tree

‎app/components/UI/Predict/components/PredictBalance/PredictBalance.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ import BadgeWrapper, {
3131
import Button, {
3232
ButtonVariants,
3333
} from '../../../../../component-library/components/Buttons/Button';
34-
import Skeleton from '../../../../../component-library/components/Skeleton/Skeleton';
34+
import { Skeleton } from '../../../../../component-library/components-temp/Skeleton';
3535
import { USDC_SYMBOL, USDC_TOKEN_ICON_URL } from '@metamask/perps-controller';
3636
import { usePredictBalance } from '../../hooks/usePredictBalance';
3737
import { usePredictDeposit } from '../../hooks/usePredictDeposit';

‎app/components/UI/Predict/components/PredictDetailsButtonsSkeleton/PredictDetailsButtonsSkeleton.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import { Box, BoxFlexDirection } from '@metamask/design-system-react-native';
33
import { useTailwind } from '@metamask/design-system-twrnc-preset';
4-
import Skeleton from '../../../../../component-library/components/Skeleton/Skeleton';
4+
import { Skeleton } from '../../../../../component-library/components-temp/Skeleton';
55
import {
66
PREDICT_DETAILS_BUTTONS_SKELETON,
77
PREDICT_DETAILS_BUTTONS_SKELETON_TEST_IDS,

‎app/components/UI/Predict/components/PredictDetailsButtonsSkeleton/__snapshots__/PredictDetailsButtonsSkeleton.test.tsx.snap‎

Lines changed: 30 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,21 @@ exports[`PredictDetailsButtonsSkeleton matches snapshot 1`] = `
3030
>
3131
<View
3232
style={
33-
{
34-
"borderRadius": 12,
35-
"height": 48,
36-
"overflow": "hidden",
37-
"width": "100%",
38-
}
33+
[
34+
{
35+
"borderRadius": 4,
36+
"overflow": "hidden",
37+
},
38+
{
39+
"height": 48,
40+
},
41+
{
42+
"width": "100%",
43+
},
44+
{
45+
"borderRadius": 12,
46+
},
47+
]
3948
}
4049
testID="predict-details-buttons-skeleton-button-1"
4150
>
@@ -72,12 +81,21 @@ exports[`PredictDetailsButtonsSkeleton matches snapshot 1`] = `
7281
>
7382
<View
7483
style={
75-
{
76-
"borderRadius": 12,
77-
"height": 48,
78-
"overflow": "hidden",
79-
"width": "100%",
80-
}
84+
[
85+
{
86+
"borderRadius": 4,
87+
"overflow": "hidden",
88+
},
89+
{
90+
"height": 48,
91+
},
92+
{
93+
"width": "100%",
94+
},
95+
{
96+
"borderRadius": 12,
97+
},
98+
]
8199
}
82100
testID="predict-details-buttons-skeleton-button-2"
83101
>

‎app/components/UI/Predict/components/PredictDetailsContentSkeleton/PredictDetailsContentSkeleton.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import { Box } from '@metamask/design-system-react-native';
33
import { useTailwind } from '@metamask/design-system-twrnc-preset';
4-
import Skeleton from '../../../../../component-library/components/Skeleton/Skeleton';
4+
import { Skeleton } from '../../../../../component-library/components-temp/Skeleton';
55
import {
66
PREDICT_DETAILS_CONTENT_SKELETON,
77
PREDICT_DETAILS_CONTENT_SKELETON_TEST_IDS,

‎app/components/UI/Predict/components/PredictDetailsContentSkeleton/__snapshots__/PredictDetailsContentSkeleton.test.tsx.snap‎

Lines changed: 60 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,21 @@ exports[`PredictDetailsContentSkeleton matches snapshot 1`] = `
2727
>
2828
<View
2929
style={
30-
{
31-
"borderRadius": 6,
32-
"height": 16,
33-
"overflow": "hidden",
34-
"width": "40%",
35-
}
30+
[
31+
{
32+
"borderRadius": 4,
33+
"overflow": "hidden",
34+
},
35+
{
36+
"height": 16,
37+
},
38+
{
39+
"width": "40%",
40+
},
41+
{
42+
"borderRadius": 6,
43+
},
44+
]
3645
}
3746
testID="predict-details-content-skeleton-line-1"
3847
>
@@ -55,12 +64,21 @@ exports[`PredictDetailsContentSkeleton matches snapshot 1`] = `
5564
</View>
5665
<View
5766
style={
58-
{
59-
"borderRadius": 12,
60-
"height": 120,
61-
"overflow": "hidden",
62-
"width": "100%",
63-
}
67+
[
68+
{
69+
"borderRadius": 4,
70+
"overflow": "hidden",
71+
},
72+
{
73+
"height": 120,
74+
},
75+
{
76+
"width": "100%",
77+
},
78+
{
79+
"borderRadius": 12,
80+
},
81+
]
6482
}
6583
testID="predict-details-content-skeleton-block-1"
6684
>
@@ -95,12 +113,21 @@ exports[`PredictDetailsContentSkeleton matches snapshot 1`] = `
95113
>
96114
<View
97115
style={
98-
{
99-
"borderRadius": 6,
100-
"height": 16,
101-
"overflow": "hidden",
102-
"width": "30%",
103-
}
116+
[
117+
{
118+
"borderRadius": 4,
119+
"overflow": "hidden",
120+
},
121+
{
122+
"height": 16,
123+
},
124+
{
125+
"width": "30%",
126+
},
127+
{
128+
"borderRadius": 6,
129+
},
130+
]
104131
}
105132
testID="predict-details-content-skeleton-line-2"
106133
>
@@ -123,12 +150,21 @@ exports[`PredictDetailsContentSkeleton matches snapshot 1`] = `
123150
</View>
124151
<View
125152
style={
126-
{
127-
"borderRadius": 12,
128-
"height": 80,
129-
"overflow": "hidden",
130-
"width": "100%",
131-
}
153+
[
154+
{
155+
"borderRadius": 4,
156+
"overflow": "hidden",
157+
},
158+
{
159+
"height": 80,
160+
},
161+
{
162+
"width": "100%",
163+
},
164+
{
165+
"borderRadius": 12,
166+
},
167+
]
132168
}
133169
testID="predict-details-content-skeleton-block-2"
134170
>

‎app/components/UI/Predict/components/PredictDetailsHeaderSkeleton/PredictDetailsHeaderSkeleton.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import Icon, {
1313
IconName,
1414
IconSize,
1515
} from '../../../../../component-library/components/Icons/Icon';
16-
import Skeleton from '../../../../../component-library/components/Skeleton/Skeleton';
16+
import { Skeleton } from '../../../../../component-library/components-temp/Skeleton';
1717
import {
1818
PREDICT_DETAILS_HEADER_SKELETON,
1919
PREDICT_DETAILS_HEADER_SKELETON_TEST_IDS,

‎app/components/UI/Predict/components/PredictDetailsHeaderSkeleton/__snapshots__/PredictDetailsHeaderSkeleton.test.tsx.snap‎

Lines changed: 31 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -88,13 +88,22 @@ exports[`PredictDetailsHeaderSkeleton matches snapshot 1`] = `
8888
>
8989
<View
9090
style={
91-
{
92-
"alignSelf": "center",
93-
"borderRadius": 6,
94-
"height": 20,
95-
"overflow": "hidden",
96-
"width": "60%",
97-
}
91+
[
92+
{
93+
"borderRadius": 4,
94+
"overflow": "hidden",
95+
},
96+
{
97+
"height": 20,
98+
},
99+
{
100+
"width": "60%",
101+
},
102+
{
103+
"alignSelf": "center",
104+
"borderRadius": 6,
105+
},
106+
]
98107
}
99108
testID="predict-details-header-skeleton-title"
100109
>
@@ -118,12 +127,21 @@ exports[`PredictDetailsHeaderSkeleton matches snapshot 1`] = `
118127
</View>
119128
<View
120129
style={
121-
{
122-
"borderRadius": 6,
123-
"height": 24,
124-
"overflow": "hidden",
125-
"width": 24,
126-
}
130+
[
131+
{
132+
"borderRadius": 4,
133+
"overflow": "hidden",
134+
},
135+
{
136+
"height": 24,
137+
},
138+
{
139+
"width": 24,
140+
},
141+
{
142+
"borderRadius": 6,
143+
},
144+
]
127145
}
128146
testID="predict-details-header-skeleton-share"
129147
>

‎app/components/UI/Predict/components/PredictHome/PredictHomeFeaturedSkeleton.test.tsx‎

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -30,18 +30,15 @@ jest.mock('@metamask/design-system-react-native', () => {
3030
};
3131
});
3232

33-
jest.mock(
34-
'../../../../../component-library/components/Skeleton/Skeleton',
35-
() => {
36-
const ReactNative = jest.requireActual('react-native');
37-
return {
38-
__esModule: true,
39-
default: ({ testID }: { testID?: string }) => (
40-
<ReactNative.View testID={testID || 'skeleton'} />
41-
),
42-
};
43-
},
44-
);
33+
jest.mock('../../../../../component-library/components-temp/Skeleton', () => {
34+
const ReactNative = jest.requireActual('react-native');
35+
return {
36+
__esModule: true,
37+
Skeleton: ({ testID }: { testID?: string }) => (
38+
<ReactNative.View testID={testID || 'skeleton'} />
39+
),
40+
};
41+
});
4542

4643
jest.mock('./PredictHomeSkeleton', () => {
4744
const ReactNative = jest.requireActual('react-native');

‎app/components/UI/Predict/components/PredictHome/PredictHomeFeaturedSkeleton.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import { Dimensions, ScrollView } from 'react-native';
33
import { Box, BoxFlexDirection } from '@metamask/design-system-react-native';
44
import { useTailwind } from '@metamask/design-system-twrnc-preset';
5-
import Skeleton from '../../../../../component-library/components/Skeleton/Skeleton';
5+
import { Skeleton } from '../../../../../component-library/components-temp/Skeleton';
66
import { PredictHomeFeaturedVariant } from '../../selectors/featureFlags';
77
import PredictHomeSkeleton from './PredictHomeSkeleton';
88
import {

‎app/components/UI/Predict/components/PredictHome/PredictHomeSkeleton.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import { Box, BoxFlexDirection } from '@metamask/design-system-react-native';
33
import { useTailwind } from '@metamask/design-system-twrnc-preset';
4-
import Skeleton from '../../../../../component-library/components/Skeleton/Skeleton';
4+
import { Skeleton } from '../../../../../component-library/components-temp/Skeleton';
55
import {
66
PREDICT_HOME_SKELETON,
77
PREDICT_HOME_SKELETON_TEST_IDS,

0 commit comments

Comments
 (0)