Skip to content

Commit ab22b9c

Browse files
danilowozdanilowoz
committed
perf(native): improve performance by removing the internal state (#193)
* perf(native): improve perfomance removing internal state related #178 related #187 * test(native): update snapshots
1 parent 5613998 commit ab22b9c

File tree

10 files changed

+57
-90
lines changed

10 files changed

+57
-90
lines changed

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
{
22
"name": "react-content-loader",
3-
"version": "5.0.1",
43
"description": "SVG-Powered component to easily create placeholder loadings (like Facebook cards loading)",
54
"repository": {
65
"type": "git",

‎src/native/Svg.tsx‎

Lines changed: 21 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,10 @@ import Svg, {
1010

1111
import uid from '../shared/uid'
1212
import { IContentLoaderProps } from './'
13-
import offsetValueBound from './offsetValueBound'
1413

15-
class NativeSvg extends Component<IContentLoaderProps, { offset: number }> {
14+
const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient)
15+
16+
class NativeSvg extends Component<IContentLoaderProps> {
1617
static defaultProps = {
1718
animate: true,
1819
backgroundColor: '#f5f6f7',
@@ -22,8 +23,6 @@ class NativeSvg extends Component<IContentLoaderProps, { offset: number }> {
2223
style: {},
2324
}
2425

25-
state = { offset: -1 }
26-
2726
animatedValue = new Animated.Value(0)
2827

2928
fixedId = this.props.uniqueKey || uid()
@@ -50,18 +49,6 @@ class NativeSvg extends Component<IContentLoaderProps, { offset: number }> {
5049
componentDidMount = () => {
5150
if (this.props.animate) {
5251
this.setAnimation()
53-
54-
this.animatedValue.addListener(({ value }) => {
55-
this.setState({
56-
offset: value,
57-
})
58-
})
59-
}
60-
}
61-
62-
componentWillUnmount = () => {
63-
if (this.props.animate) {
64-
this.animatedValue.removeAllListeners()
6552
}
6653
}
6754

@@ -75,9 +62,17 @@ class NativeSvg extends Component<IContentLoaderProps, { offset: number }> {
7562
...props
7663
} = this.props
7764

78-
const offset1 = offsetValueBound(this.state.offset - 1)
79-
const offset2 = offsetValueBound(this.state.offset)
80-
const offset3 = offsetValueBound(this.state.offset + 1)
65+
const x1Animation = this.animatedValue.interpolate({
66+
extrapolate: 'clamp',
67+
inputRange: [-1, 2],
68+
outputRange: ['-100%', '100%'],
69+
})
70+
71+
const x2Animation = this.animatedValue.interpolate({
72+
extrapolate: 'clamp',
73+
inputRange: [-1, 2],
74+
outputRange: ['0%', '200%'],
75+
})
8176

8277
const rtlStyle: object = rtl ? { transform: [{ rotateY: '180deg' }] } : {}
8378
const svgStyle = Object.assign(Object.assign({}, style), rtlStyle)
@@ -101,17 +96,17 @@ class NativeSvg extends Component<IContentLoaderProps, { offset: number }> {
10196
<Defs>
10297
<ClipPath id={this.idGradient}>{children}</ClipPath>
10398

104-
<LinearGradient
99+
<AnimatedLinearGradient
105100
id={this.idClip}
106-
x1={'-100%'}
101+
x1={x1Animation}
102+
x2={x2Animation}
107103
y1={0}
108-
x2={'100%'}
109104
y2={0}
110105
>
111-
<Stop offset={offset1} stopColor={backgroundColor} />
112-
<Stop offset={offset2} stopColor={foregroundColor} />
113-
<Stop offset={offset3} stopColor={backgroundColor} />
114-
</LinearGradient>
106+
<Stop offset={0} stopColor={backgroundColor} />
107+
<Stop offset={0.5} stopColor={foregroundColor} />
108+
<Stop offset={1} stopColor={backgroundColor} />
109+
</AnimatedLinearGradient>
115110
</Defs>
116111
</Svg>
117112
)

‎src/native/__tests__/__snapshots__/snapshots.test.tsx.snap‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -62,8 +62,8 @@ exports[`ContentLoader snapshots renders correctly the basic version 1`] = `
6262
</ClipPath>
6363
<LinearGradient
6464
id="snapshots-diff"
65-
x1="-100%"
66-
x2="100%"
65+
x1="-33.33333333333334%"
66+
x2="66.66666666666666%"
6767
y1={0}
6868
y2={0}
6969
>
@@ -72,11 +72,11 @@ exports[`ContentLoader snapshots renders correctly the basic version 1`] = `
7272
stopColor="#f5f6f7"
7373
/>
7474
<Stop
75-
offset={0}
75+
offset={0.5}
7676
stopColor="#eee"
7777
/>
7878
<Stop
79-
offset={0}
79+
offset={1}
8080
stopColor="#f5f6f7"
8181
/>
8282
</LinearGradient>
@@ -146,8 +146,8 @@ exports[`ContentLoader snapshots renders correctly with viewBox defined 1`] = `
146146
</ClipPath>
147147
<LinearGradient
148148
id="snapshots-diff"
149-
x1="-100%"
150-
x2="100%"
149+
x1="-33.33333333333334%"
150+
x2="66.66666666666666%"
151151
y1={0}
152152
y2={0}
153153
>
@@ -156,11 +156,11 @@ exports[`ContentLoader snapshots renders correctly with viewBox defined 1`] = `
156156
stopColor="#f5f6f7"
157157
/>
158158
<Stop
159-
offset={0}
159+
offset={0.5}
160160
stopColor="#eee"
161161
/>
162162
<Stop
163-
offset={0}
163+
offset={1}
164164
stopColor="#f5f6f7"
165165
/>
166166
</LinearGradient>
@@ -230,8 +230,8 @@ exports[`ContentLoader snapshots renders correctly with viewBox defined and size
230230
</ClipPath>
231231
<LinearGradient
232232
id="snapshots-diff"
233-
x1="-100%"
234-
x2="100%"
233+
x1="-33.33333333333334%"
234+
x2="66.66666666666666%"
235235
y1={0}
236236
y2={0}
237237
>
@@ -240,11 +240,11 @@ exports[`ContentLoader snapshots renders correctly with viewBox defined and size
240240
stopColor="#f5f6f7"
241241
/>
242242
<Stop
243-
offset={0}
243+
offset={0.5}
244244
stopColor="#eee"
245245
/>
246246
<Stop
247-
offset={0}
247+
offset={1}
248248
stopColor="#f5f6f7"
249249
/>
250250
</LinearGradient>
@@ -314,8 +314,8 @@ exports[`ContentLoader snapshots renders correctly with viewBox empty 1`] = `
314314
</ClipPath>
315315
<LinearGradient
316316
id="snapshots-diff"
317-
x1="-100%"
318-
x2="100%"
317+
x1="-33.33333333333334%"
318+
x2="66.66666666666666%"
319319
y1={0}
320320
y2={0}
321321
>
@@ -324,11 +324,11 @@ exports[`ContentLoader snapshots renders correctly with viewBox empty 1`] = `
324324
stopColor="#f5f6f7"
325325
/>
326326
<Stop
327-
offset={0}
327+
offset={0.5}
328328
stopColor="#eee"
329329
/>
330330
<Stop
331-
offset={0}
331+
offset={1}
332332
stopColor="#f5f6f7"
333333
/>
334334
</LinearGradient>

‎src/native/__tests__/offsetValueBound.test.ts‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎src/native/__tests__/presets/__snapshots__/BulletListStyle.test.tsx.snap‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -74,8 +74,8 @@ exports[`BulletListStyle renders correctly 1`] = `
7474
</ClipPath>
7575
<LinearGradient
7676
id="BulletListStyle-diff"
77-
x1="-100%"
78-
x2="100%"
77+
x1="-33.33333333333334%"
78+
x2="66.66666666666666%"
7979
y1={0}
8080
y2={0}
8181
>
@@ -84,11 +84,11 @@ exports[`BulletListStyle renders correctly 1`] = `
8484
stopColor="#f5f6f7"
8585
/>
8686
<Stop
87-
offset={0}
87+
offset={0.5}
8888
stopColor="#eee"
8989
/>
9090
<Stop
91-
offset={0}
91+
offset={1}
9292
stopColor="#f5f6f7"
9393
/>
9494
</LinearGradient>

‎src/native/__tests__/presets/__snapshots__/CodeStyle.test.tsx.snap‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -78,8 +78,8 @@ exports[`CodeStyle renders correctly 1`] = `
7878
</ClipPath>
7979
<LinearGradient
8080
id="CodeStyle-diff"
81-
x1="-100%"
82-
x2="100%"
81+
x1="-33.33333333333334%"
82+
x2="66.66666666666666%"
8383
y1={0}
8484
y2={0}
8585
>
@@ -88,11 +88,11 @@ exports[`CodeStyle renders correctly 1`] = `
8888
stopColor="#f5f6f7"
8989
/>
9090
<Stop
91-
offset={0}
91+
offset={0.5}
9292
stopColor="#eee"
9393
/>
9494
<Stop
95-
offset={0}
95+
offset={1}
9696
stopColor="#f5f6f7"
9797
/>
9898
</LinearGradient>

‎src/native/__tests__/presets/__snapshots__/FacebookStyle.test.tsx.snap‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -62,8 +62,8 @@ exports[`FacebookStyle renders correctly 1`] = `
6262
</ClipPath>
6363
<LinearGradient
6464
id="FacebookStyle-diff"
65-
x1="-100%"
66-
x2="100%"
65+
x1="-33.33333333333334%"
66+
x2="66.66666666666666%"
6767
y1={0}
6868
y2={0}
6969
>
@@ -72,11 +72,11 @@ exports[`FacebookStyle renders correctly 1`] = `
7272
stopColor="#f5f6f7"
7373
/>
7474
<Stop
75-
offset={0}
75+
offset={0.5}
7676
stopColor="#eee"
7777
/>
7878
<Stop
79-
offset={0}
79+
offset={1}
8080
stopColor="#f5f6f7"
8181
/>
8282
</LinearGradient>

‎src/native/__tests__/presets/__snapshots__/InstagramStyle.test.tsx.snap‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,8 @@ exports[`InstagramStyle renders correctly 1`] = `
5151
</ClipPath>
5252
<LinearGradient
5353
id="InstagramStyle-diff"
54-
x1="-100%"
55-
x2="100%"
54+
x1="-33.33333333333334%"
55+
x2="66.66666666666666%"
5656
y1={0}
5757
y2={0}
5858
>
@@ -61,11 +61,11 @@ exports[`InstagramStyle renders correctly 1`] = `
6161
stopColor="#f5f6f7"
6262
/>
6363
<Stop
64-
offset={0}
64+
offset={0.5}
6565
stopColor="#eee"
6666
/>
6767
<Stop
68-
offset={0}
68+
offset={1}
6969
stopColor="#f5f6f7"
7070
/>
7171
</LinearGradient>

‎src/native/__tests__/presets/__snapshots__/ListStyle.test.tsx.snap‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -70,8 +70,8 @@ exports[`ListStyle renders correctly 1`] = `
7070
</ClipPath>
7171
<LinearGradient
7272
id="ListStyle-diff"
73-
x1="-100%"
74-
x2="100%"
73+
x1="-33.33333333333334%"
74+
x2="66.66666666666666%"
7575
y1={0}
7676
y2={0}
7777
>
@@ -80,11 +80,11 @@ exports[`ListStyle renders correctly 1`] = `
8080
stopColor="#f5f6f7"
8181
/>
8282
<Stop
83-
offset={0}
83+
offset={0.5}
8484
stopColor="#eee"
8585
/>
8686
<Stop
87-
offset={0}
87+
offset={1}
8888
stopColor="#f5f6f7"
8989
/>
9090
</LinearGradient>

‎src/native/offsetValueBound.ts‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

0 commit comments

Comments
 (0)