From 7f254dea7817e68ec0d07f33538d7f967f800a25 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Tue, 19 Sep 2017 15:12:02 -0700
Subject: [PATCH] Replaced react-motion with CSS transition for better perf
 (#10751)

---
 www/package.json                              |   1 -
 .../StickyResponsiveSidebar.js                | 274 +++++++++---------
 www/yarn.lock                                 |  10 +-
 3 files changed, 135 insertions(+), 150 deletions(-)

diff --git a/www/package.json b/www/package.json
index 5e235cdc945b0..b6de658213e06 100644
--- a/www/package.json
+++ b/www/package.json
@@ -27,7 +27,6 @@
     "glamor": "^2.20.40",
     "hex2rgba": "^0.0.1",
     "react-live": "^1.7.1",
-    "react-motion": "^0.5.1",
     "react-sticky": "^6.0.1",
     "remarkable": "^1.7.1",
     "slugify": "^1.2.1"
diff --git a/www/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js b/www/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js
index 8c0f068408fe7..e76d96b99d62f 100644
--- a/www/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js
+++ b/www/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js
@@ -16,7 +16,6 @@ import {Component, React} from 'react';
 import isItemActive from 'utils/isItemActive';
 import Sidebar from 'templates/components/Sidebar';
 import {colors, media} from 'theme';
-import {Motion, spring} from 'react-motion';
 import ChevronSvg from './ChevronSvg';
 
 function findActiveItemTitle(location, defaultActiveSection) {
@@ -59,6 +58,7 @@ class StickyResponsiveSidebar extends Component {
 
   render() {
     const {defaultActiveSection, location} = this.props;
+    const {open} = this.state;
     const smallScreenSidebarStyles = {
       top: 0,
       left: 0,
@@ -70,7 +70,7 @@ class StickyResponsiveSidebar extends Component {
       height: '100vh',
       overflowY: 'auto',
       WebkitOverflowScrolling: 'touch',
-      pointerEvents: this.state.open ? 'auto' : 'none',
+      pointerEvents: open ? 'auto' : 'none',
     };
 
     const smallScreenBottomBarStyles = {
@@ -81,167 +81,161 @@ class StickyResponsiveSidebar extends Component {
       ? findActiveItemTitle(location, defaultActiveSection)
       : null;
 
+    const iconOffset = open ? 7 : 0;
+    const labelOffset = open ? -40 : 0;
+    const menuOpacity = open ? 1 : 0;
+    const menuOffset = open ? 0 : 40;
+
     return (
-      <Motion
-        defaultStyle={{
-          iconOffset: 0,
-          labelOffset: 0,
-          menuOpacity: 0,
-          menuOffset: 40,
-        }}
-        style={{
-          iconOffset: spring(this.state.open ? 7 : 0),
-          labelOffset: spring(this.state.open ? -40 : 0),
-          menuOpacity: spring(this.state.open ? 1 : 0),
-          menuOffset: spring(this.state.open ? 0 : 40),
-        }}>
-        {value => (
-          <div>
+      <div>
+        <div
+          style={{
+            opacity: menuOpacity,
+            transition: 'opacity 0.5s ease',
+          }}
+          css={{
+            [media.lessThan('small')]: smallScreenSidebarStyles,
+
+            [media.greaterThan('medium')]: {
+              marginRight: -999,
+              paddingRight: 999,
+              backgroundColor: '#f7f7f7',
+            },
+
+            [media.between('medium', 'sidebarFixed', true)]: {
+              position: 'fixed',
+              zIndex: 2,
+              height: '100%',
+            },
+
+            [media.greaterThan('small')]: {
+              position: 'fixed',
+              zIndex: 2,
+              height: 'calc(100vh - 60px)',
+              overflowY: 'auto',
+              WebkitOverflowScrolling: 'touch',
+              marginRight: -999,
+              paddingRight: 999,
+              backgroundColor: '#f7f7f7',
+              opacity: '1 !important',
+            },
+
+            [media.size('small')]: {
+              height: 'calc(100vh - 40px)',
+            },
+
+            [media.between('medium', 'large')]: {
+              height: 'calc(100vh - 50px)',
+            },
+
+            [media.greaterThan('sidebarFixed')]: {
+              borderLeft: '1px solid #ececec',
+            },
+          }}>
+          <div
+            style={{
+              transform: `translate(0px, ${menuOffset}px)`,
+              transition: 'transform 0.5s ease',
+            }}
+            css={{
+              marginTop: 60,
+
+              [media.lessThan('small')]: {
+                marginTop: 40,
+              },
+
+              [media.between('medium', 'large')]: {
+                marginTop: 50,
+              },
+
+              [media.greaterThan('small')]: {
+                tranform: 'none !important',
+              },
+            }}>
+            <Sidebar {...this.props} />
+          </div>
+        </div>
+        <div
+          css={{
+            backgroundColor: colors.darker,
+            bottom: 0,
+            color: colors.brand,
+            display: 'none', // gets overriden at small screen sizes
+            left: 0,
+            cursor: 'pointer',
+            position: 'fixed',
+            right: 0,
+            width: '100%',
+            zIndex: 3,
+            [media.lessThan('small')]: smallScreenBottomBarStyles,
+          }}
+          onClick={this.toggleOpen}>
+          <Container>
             <div
-              style={{
-                opacity: value.menuOpacity,
-              }}
               css={{
-                [media.lessThan('small')]: smallScreenSidebarStyles,
-
-                [media.greaterThan('medium')]: {
-                  marginRight: -999,
-                  paddingRight: 999,
-                  backgroundColor: '#f7f7f7',
-                },
-
-                [media.between('medium', 'sidebarFixed', true)]: {
-                  position: 'fixed',
-                  zIndex: 2,
-                  height: '100%',
-                },
-
-                [media.greaterThan('small')]: {
-                  position: 'fixed',
-                  zIndex: 2,
-                  height: 'calc(100vh - 60px)',
-                  overflowY: 'auto',
-                  WebkitOverflowScrolling: 'touch',
-                  marginRight: -999,
-                  paddingRight: 999,
-                  backgroundColor: '#f7f7f7',
-                  opacity: '1 !important',
-                },
-
-                [media.size('small')]: {
-                  height: 'calc(100vh - 40px)',
-                },
-
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+                height: 60,
                 [media.between('medium', 'large')]: {
-                  height: 'calc(100vh - 50px)',
+                  height: 50,
                 },
-
-                [media.greaterThan('sidebarFixed')]: {
-                  borderLeft: '1px solid #ececec',
+                [media.lessThan('small')]: {
+                  height: 40,
+                  overflow: 'hidden',
+                  alignItems: 'flex-start',
                 },
               }}>
               <div
-                style={{
-                  transform: `translate(0px, ${value.menuOffset}px)`,
-                }}
                 css={{
-                  marginTop: 60,
-
-                  [media.lessThan('small')]: {
-                    marginTop: 40,
-                  },
-
-                  [media.between('medium', 'large')]: {
-                    marginTop: 50,
-                  },
-
-                  [media.greaterThan('small')]: {
-                    tranform: 'none !important',
-                  },
+                  width: 20,
+                  marginRight: 10,
+                  alignSelf: 'center',
+                  display: 'flex',
+                  flexDirection: 'column',
                 }}>
-                <Sidebar {...this.props} />
+                <ChevronSvg
+                  cssProps={{
+                    transform: `translate(0, ${iconOffset}px) rotate(180deg)`,
+                    transition: 'transform 0.5s ease',
+                  }}
+                />
+                <ChevronSvg
+                  cssProps={{
+                    transform: `translate(0, ${0 - iconOffset}px)`,
+                    transition: 'transform 0.5s ease',
+                  }}
+                />
               </div>
-            </div>
-            <div
-              css={{
-                backgroundColor: colors.darker,
-                bottom: 0,
-                color: colors.brand,
-                display: 'none', // gets overriden at small screen sizes
-                left: 0,
-                cursor: 'pointer',
-                position: 'fixed',
-                right: 0,
-                width: '100%',
-                zIndex: 3,
-                [media.lessThan('small')]: smallScreenBottomBarStyles,
-              }}
-              onClick={this.toggleOpen}>
-              <Container>
+              <div
+                css={{
+                  flexGrow: 1,
+                }}>
                 <div
-                  css={{
-                    display: 'flex',
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    height: 60,
-                    [media.between('medium', 'large')]: {
-                      height: 50,
-                    },
-                    [media.lessThan('small')]: {
-                      height: 40,
-                      overflow: 'hidden',
-                      alignItems: 'flex-start',
-                    },
+                  style={{
+                    transform: `translate(0, ${labelOffset}px)`,
+                    transition: 'transform 0.5s ease',
                   }}>
                   <div
                     css={{
-                      width: 20,
-                      marginRight: 10,
-                      alignSelf: 'center',
-                      display: 'flex',
-                      flexDirection: 'column',
+                      height: 40,
+                      lineHeight: '40px',
                     }}>
-                    <ChevronSvg
-                      cssProps={{
-                        transform: `translate(0, ${value.iconOffset}px) rotate(180deg)`,
-                      }}
-                    />
-                    <ChevronSvg
-                      cssProps={{
-                        transform: `translate(0, ${0 - value.iconOffset}px)`,
-                      }}
-                    />
+                    {title}
                   </div>
                   <div
                     css={{
-                      flexGrow: 1,
+                      height: 40,
+                      lineHeight: '40px',
                     }}>
-                    <div
-                      style={{
-                        transform: `translate(0, ${value.labelOffset}px)`,
-                      }}>
-                      <div
-                        css={{
-                          height: 40,
-                          lineHeight: '40px',
-                        }}>
-                        {title}
-                      </div>
-                      <div
-                        css={{
-                          height: 40,
-                          lineHeight: '40px',
-                        }}>
-                        Close
-                      </div>
-                    </div>
+                    Close
                   </div>
                 </div>
-              </Container>
+              </div>
             </div>
-          </div>
-        )}
-      </Motion>
+          </Container>
+        </div>
+      </div>
     );
   }
 }
diff --git a/www/yarn.lock b/www/yarn.lock
index 941bf3092b8af..cea2b9eb2bb44 100644
--- a/www/yarn.lock
+++ b/www/yarn.lock
@@ -6963,7 +6963,7 @@ querystringify@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-1.0.0.tgz#6286242112c5b712fa654e526652bf6a13ff05cb"
 
-raf@^3.1.0, raf@^3.3.0:
+raf@^3.3.0:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/raf/-/raf-3.3.2.tgz#0c13be0b5b49b46f76d6669248d527cf2b02fe27"
   dependencies:
@@ -7051,14 +7051,6 @@ react-live@^1.7.1:
     prop-types "^15.5.8"
     unescape "^0.2.0"
 
-react-motion@^0.5.1:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/react-motion/-/react-motion-0.5.1.tgz#b90631408175ab1668e173caccd66d41a44f4592"
-  dependencies:
-    performance-now "^0.2.0"
-    prop-types "^15.5.8"
-    raf "^3.1.0"
-
 react-proxy@^3.0.0-alpha.0:
   version "3.0.0-alpha.1"
   resolved "https://registry.yarnpkg.com/react-proxy/-/react-proxy-3.0.0-alpha.1.tgz#4400426bcfa80caa6724c7755695315209fa4b07"