From c11e46c3726e2d9f7e72df69b25a88ae5034309e Mon Sep 17 00:00:00 2001
From: Kevin-ds <kevin.ds.29@gmail.com>
Date: Fri, 11 Aug 2017 00:59:06 -0300
Subject: [PATCH] [LinearProgress] Use transform instead width

Use transform:scaleX for better performance on Buffer and Determinate modes
---
 src/Progress/LinearProgress.js      | 20 +++++++++++---------
 src/Progress/LinearProgress.spec.js | 18 +++++++++++++++---
 2 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/Progress/LinearProgress.js b/src/Progress/LinearProgress.js
index eba11be2f0438c..d66167066da13a 100644
--- a/src/Progress/LinearProgress.js
+++ b/src/Progress/LinearProgress.js
@@ -39,11 +39,13 @@ export const styleSheet = createStyleSheet('MuiLinearProgress', theme => ({
     backgroundPosition: '0px -23px',
   },
   bar: {
+    width: '100%',
     position: 'absolute',
     left: 0,
     bottom: 0,
     top: 0,
     transition: 'transform 0.2s linear',
+    transformOrigin: 'left',
   },
   dashed: {
     position: 'absolute',
@@ -53,7 +55,7 @@ export const styleSheet = createStyleSheet('MuiLinearProgress', theme => ({
     animation: 'buffer 3s infinite linear',
   },
   bufferBar2: {
-    transition: `width .${transitionDuration}s linear`,
+    transition: `transform .${transitionDuration}s linear`,
   },
   rootBuffer: {
     backgroundColor: 'transparent',
@@ -71,19 +73,19 @@ export const styleSheet = createStyleSheet('MuiLinearProgress', theme => ({
     animationDelay: '1.15s',
   },
   determinateBar1: {
-    willChange: 'width',
-    transition: `width .${transitionDuration}s linear`,
+    willChange: 'transform',
+    transition: `transform .${transitionDuration}s linear`,
   },
   bufferBar1: {
     zIndex: 1,
-    transition: `width .${transitionDuration}s linear`,
+    transition: `transform .${transitionDuration}s linear`,
   },
   bufferBar2Primary: {
-    transition: `width .${transitionDuration}s linear`,
+    transition: `transform .${transitionDuration}s linear`,
     backgroundColor: theme.palette.primary[100],
   },
   bufferBar2Accent: {
-    transition: `width .${transitionDuration}s linear`,
+    transition: `transform .${transitionDuration}s linear`,
     backgroundColor: theme.palette.accent.A100,
   },
   '@keyframes mui-indeterminate1': {
@@ -167,11 +169,11 @@ function LinearProgress(props) {
   const rootProps = {};
 
   if (mode === 'determinate') {
-    styles.primary.width = `${value}%`;
+    styles.primary.transform = `scaleX(${value / 100})`;
     rootProps['aria-valuenow'] = Math.round(value);
   } else if (mode === 'buffer') {
-    styles.primary.width = `${value}%`;
-    styles.secondary.width = `${valueBuffer}%`;
+    styles.primary.transform = `scaleX(${value / 100})`;
+    styles.secondary.transform = `scaleX(${valueBuffer / 100})`;
   }
 
   return (
diff --git a/src/Progress/LinearProgress.spec.js b/src/Progress/LinearProgress.spec.js
index 07ba89d312d63d..9a058a276e923b 100644
--- a/src/Progress/LinearProgress.spec.js
+++ b/src/Progress/LinearProgress.spec.js
@@ -129,7 +129,11 @@ describe('<LinearProgress />', () => {
   it('should set width of bar1 on determinate mode', () => {
     const wrapper = shallow(<LinearProgress mode="determinate" value={77} />);
     assert.strictEqual(wrapper.hasClass(classes.root), true);
-    assert.strictEqual(wrapper.childAt(0).props().style.width, '77%', 'should have width set');
+    assert.strictEqual(
+      wrapper.childAt(0).props().style.transform,
+      'scaleX(0.77)',
+      'should have width set',
+    );
     assert.strictEqual(wrapper.props()['aria-valuenow'], 77);
   });
 
@@ -226,8 +230,16 @@ describe('<LinearProgress />', () => {
   it('should set width of bar1 and bar2 on buffer mode', () => {
     const wrapper = shallow(<LinearProgress mode="buffer" value={77} valueBuffer={85} />);
     assert.strictEqual(wrapper.hasClass(classes.root), true);
-    assert.strictEqual(wrapper.childAt(1).props().style.width, '77%', 'should have width set');
-    assert.strictEqual(wrapper.childAt(2).props().style.width, '85%', 'should have width set');
+    assert.strictEqual(
+      wrapper.childAt(1).props().style.transform,
+      'scaleX(0.77)',
+      'should have width set',
+    );
+    assert.strictEqual(
+      wrapper.childAt(2).props().style.transform,
+      'scaleX(0.85)',
+      'should have width set',
+    );
   });
 
   it('should render with query classes', () => {