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
danilowoz · Apr 8, 2020 · ab22b9c · ab22b9c
1 parent 5613998
commit ab22b9c
Show file tree

Hide file tree

Showing 10 changed files with 57 additions and 90 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,5 @@
 {
   "name": "react-content-loader",
-  "version": "5.0.1",
   "description": "SVG-Powered component to easily create placeholder loadings (like Facebook cards loading)",
   "repository": {
     "type": "git",

diff --git a/src/native/Svg.tsx b/src/native/Svg.tsx
@@ -10,9 +10,10 @@ import Svg, {
 
 import uid from '../shared/uid'
 import { IContentLoaderProps } from './'
-import offsetValueBound from './offsetValueBound'
 
-class NativeSvg extends Component<IContentLoaderProps, { offset: number }> {
+const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient)
+
+class NativeSvg extends Component<IContentLoaderProps> {
   static defaultProps = {
     animate: true,
     backgroundColor: '#f5f6f7',
@@ -22,8 +23,6 @@ class NativeSvg extends Component<IContentLoaderProps, { offset: number }> {
     style: {},
   }
 
-  state = { offset: -1 }
-
   animatedValue = new Animated.Value(0)
 
   fixedId = this.props.uniqueKey || uid()
@@ -50,18 +49,6 @@ class NativeSvg extends Component<IContentLoaderProps, { offset: number }> {
   componentDidMount = () => {
     if (this.props.animate) {
       this.setAnimation()
-
-      this.animatedValue.addListener(({ value }) => {
-        this.setState({
-          offset: value,
-        })
-      })
-    }
-  }
-
-  componentWillUnmount = () => {
-    if (this.props.animate) {
-      this.animatedValue.removeAllListeners()
     }
   }
 
@@ -75,9 +62,17 @@ class NativeSvg extends Component<IContentLoaderProps, { offset: number }> {
       ...props
     } = this.props
 
-    const offset1 = offsetValueBound(this.state.offset - 1)
-    const offset2 = offsetValueBound(this.state.offset)
-    const offset3 = offsetValueBound(this.state.offset + 1)
+    const x1Animation = this.animatedValue.interpolate({
+      extrapolate: 'clamp',
+      inputRange: [-1, 2],
+      outputRange: ['-100%', '100%'],
+    })
+
+    const x2Animation = this.animatedValue.interpolate({
+      extrapolate: 'clamp',
+      inputRange: [-1, 2],
+      outputRange: ['0%', '200%'],
+    })
 
     const rtlStyle: object = rtl ? { transform: [{ rotateY: '180deg' }] } : {}
     const svgStyle = Object.assign(Object.assign({}, style), rtlStyle)
@@ -101,17 +96,17 @@ class NativeSvg extends Component<IContentLoaderProps, { offset: number }> {
         <Defs>
           <ClipPath id={this.idGradient}>{children}</ClipPath>
 
-          <LinearGradient
+          <AnimatedLinearGradient
             id={this.idClip}
-            x1={'-100%'}
+            x1={x1Animation}
+            x2={x2Animation}
             y1={0}
-            x2={'100%'}
             y2={0}
           >
-            <Stop offset={offset1} stopColor={backgroundColor} />
-            <Stop offset={offset2} stopColor={foregroundColor} />
-            <Stop offset={offset3} stopColor={backgroundColor} />
-          </LinearGradient>
+            <Stop offset={0} stopColor={backgroundColor} />
+            <Stop offset={0.5} stopColor={foregroundColor} />
+            <Stop offset={1} stopColor={backgroundColor} />
+          </AnimatedLinearGradient>
         </Defs>
       </Svg>
     )

diff --git a/src/native/__tests__/__snapshots__/snapshots.test.tsx.snap b/src/native/__tests__/__snapshots__/snapshots.test.tsx.snap
@@ -62,8 +62,8 @@ exports[`ContentLoader snapshots renders correctly the basic version 1`] = `
     </ClipPath>
     <LinearGradient
       id="snapshots-diff"
-      x1="-100%"
-      x2="100%"
+      x1="-33.33333333333334%"
+      x2="66.66666666666666%"
       y1={0}
       y2={0}
     >
@@ -72,11 +72,11 @@ exports[`ContentLoader snapshots renders correctly the basic version 1`] = `
         stopColor="#f5f6f7"
       />
       <Stop
-        offset={0}
+        offset={0.5}
         stopColor="#eee"
       />
       <Stop
-        offset={0}
+        offset={1}
         stopColor="#f5f6f7"
       />
     </LinearGradient>
@@ -146,8 +146,8 @@ exports[`ContentLoader snapshots renders correctly with viewBox defined 1`] = `
     </ClipPath>
     <LinearGradient
       id="snapshots-diff"
-      x1="-100%"
-      x2="100%"
+      x1="-33.33333333333334%"
+      x2="66.66666666666666%"
       y1={0}
       y2={0}
     >
@@ -156,11 +156,11 @@ exports[`ContentLoader snapshots renders correctly with viewBox defined 1`] = `
         stopColor="#f5f6f7"
       />
       <Stop
-        offset={0}
+        offset={0.5}
         stopColor="#eee"
       />
       <Stop
-        offset={0}
+        offset={1}
         stopColor="#f5f6f7"
       />
     </LinearGradient>
@@ -230,8 +230,8 @@ exports[`ContentLoader snapshots renders correctly with viewBox defined and size
     </ClipPath>
     <LinearGradient
       id="snapshots-diff"
-      x1="-100%"
-      x2="100%"
+      x1="-33.33333333333334%"
+      x2="66.66666666666666%"
       y1={0}
       y2={0}
     >
@@ -240,11 +240,11 @@ exports[`ContentLoader snapshots renders correctly with viewBox defined and size
         stopColor="#f5f6f7"
       />
       <Stop
-        offset={0}
+        offset={0.5}
         stopColor="#eee"
       />
       <Stop
-        offset={0}
+        offset={1}
         stopColor="#f5f6f7"
       />
     </LinearGradient>
@@ -314,8 +314,8 @@ exports[`ContentLoader snapshots renders correctly with viewBox empty 1`] = `
     </ClipPath>
     <LinearGradient
       id="snapshots-diff"
-      x1="-100%"
-      x2="100%"
+      x1="-33.33333333333334%"
+      x2="66.66666666666666%"
       y1={0}
       y2={0}
     >
@@ -324,11 +324,11 @@ exports[`ContentLoader snapshots renders correctly with viewBox empty 1`] = `
         stopColor="#f5f6f7"
       />
       <Stop
-        offset={0}
+        offset={0.5}
         stopColor="#eee"
       />
       <Stop
-        offset={0}
+        offset={1}
         stopColor="#f5f6f7"
       />
     </LinearGradient>

diff --git a/src/native/__tests__/offsetValueBound.test.ts b/src/native/__tests__/offsetValueBound.test.ts
diff --git a/src/native/__tests__/presets/__snapshots__/BulletListStyle.test.tsx.snap b/src/native/__tests__/presets/__snapshots__/BulletListStyle.test.tsx.snap
@@ -74,8 +74,8 @@ exports[`BulletListStyle renders correctly 1`] = `
     </ClipPath>
     <LinearGradient
       id="BulletListStyle-diff"
-      x1="-100%"
-      x2="100%"
+      x1="-33.33333333333334%"
+      x2="66.66666666666666%"
       y1={0}
       y2={0}
     >
@@ -84,11 +84,11 @@ exports[`BulletListStyle renders correctly 1`] = `
         stopColor="#f5f6f7"
       />
       <Stop
-        offset={0}
+        offset={0.5}
         stopColor="#eee"
       />
       <Stop
-        offset={0}
+        offset={1}
         stopColor="#f5f6f7"
       />
     </LinearGradient>

diff --git a/src/native/__tests__/presets/__snapshots__/CodeStyle.test.tsx.snap b/src/native/__tests__/presets/__snapshots__/CodeStyle.test.tsx.snap
@@ -78,8 +78,8 @@ exports[`CodeStyle renders correctly 1`] = `
     </ClipPath>
     <LinearGradient
       id="CodeStyle-diff"
-      x1="-100%"
-      x2="100%"
+      x1="-33.33333333333334%"
+      x2="66.66666666666666%"
       y1={0}
       y2={0}
     >
@@ -88,11 +88,11 @@ exports[`CodeStyle renders correctly 1`] = `
         stopColor="#f5f6f7"
       />
       <Stop
-        offset={0}
+        offset={0.5}
         stopColor="#eee"
       />
       <Stop
-        offset={0}
+        offset={1}
         stopColor="#f5f6f7"
       />
     </LinearGradient>

diff --git a/src/native/__tests__/presets/__snapshots__/FacebookStyle.test.tsx.snap b/src/native/__tests__/presets/__snapshots__/FacebookStyle.test.tsx.snap
@@ -62,8 +62,8 @@ exports[`FacebookStyle renders correctly 1`] = `
     </ClipPath>
     <LinearGradient
       id="FacebookStyle-diff"
-      x1="-100%"
-      x2="100%"
+      x1="-33.33333333333334%"
+      x2="66.66666666666666%"
       y1={0}
       y2={0}
     >
@@ -72,11 +72,11 @@ exports[`FacebookStyle renders correctly 1`] = `
         stopColor="#f5f6f7"
       />
       <Stop
-        offset={0}
+        offset={0.5}
         stopColor="#eee"
       />
       <Stop
-        offset={0}
+        offset={1}
         stopColor="#f5f6f7"
       />
     </LinearGradient>

diff --git a/src/native/__tests__/presets/__snapshots__/InstagramStyle.test.tsx.snap b/src/native/__tests__/presets/__snapshots__/InstagramStyle.test.tsx.snap
@@ -51,8 +51,8 @@ exports[`InstagramStyle renders correctly 1`] = `
     </ClipPath>
     <LinearGradient
       id="InstagramStyle-diff"
-      x1="-100%"
-      x2="100%"
+      x1="-33.33333333333334%"
+      x2="66.66666666666666%"
       y1={0}
       y2={0}
     >
@@ -61,11 +61,11 @@ exports[`InstagramStyle renders correctly 1`] = `
         stopColor="#f5f6f7"
       />
       <Stop
-        offset={0}
+        offset={0.5}
         stopColor="#eee"
       />
       <Stop
-        offset={0}
+        offset={1}
         stopColor="#f5f6f7"
       />
     </LinearGradient>

diff --git a/src/native/__tests__/presets/__snapshots__/ListStyle.test.tsx.snap b/src/native/__tests__/presets/__snapshots__/ListStyle.test.tsx.snap
@@ -70,8 +70,8 @@ exports[`ListStyle renders correctly 1`] = `
     </ClipPath>
     <LinearGradient
       id="ListStyle-diff"
-      x1="-100%"
-      x2="100%"
+      x1="-33.33333333333334%"
+      x2="66.66666666666666%"
       y1={0}
       y2={0}
     >
@@ -80,11 +80,11 @@ exports[`ListStyle renders correctly 1`] = `
         stopColor="#f5f6f7"
       />
       <Stop
-        offset={0}
+        offset={0.5}
         stopColor="#eee"
       />
       <Stop
-        offset={0}
+        offset={1}
         stopColor="#f5f6f7"
       />
     </LinearGradient>

diff --git a/src/native/offsetValueBound.ts b/src/native/offsetValueBound.ts