Survey tweaks (#405)

- Upgrade @aragon/ui to 0.16.0 (fast SidePanel animation ✨).
- Upgrade react-spring to 5.4.0.
- Fix animation issues on Chrome 👌👌👌 (translate3d() / scale3d() all the things).
- SurveyOptions: use the react-spring delay prop instead of setTimeout().
- Surveys: use React.PureComponent.
- Tweak animation delays.
- SurveyOptions: prevent useless updates.
- Use the react-spring delay prop instead of setTimeout().

apps/survey/app/package.json

@@ -5,7 +5,7 @@
   "license": "AGPL-3.0-or-later",
   "dependencies": {
     "@aragon/client": "1.0.0-beta.9",
-    "@aragon/ui": "0.15.0",
+    "@aragon/ui": "0.16.0",
     "bignumber.js": "^7.2.1",
     "date-fns": "2.0.0-alpha.8",
     "onecolor": "^3.0.5",
@@ -14,7 +14,7 @@
     "react-blockies": "^1.3.0",
     "react-display-name": "^0.2.3",
     "react-dom": "^16.3.1",
-    "react-spring": "^5.1.10",
+    "react-spring": "^5.4.0",
     "styled-components": "3.2.6"
   },
   "devDependencies": {

apps/survey/app/src/components/Survey/Survey.js

@@ -57,9 +57,10 @@ class Survey extends React.Component {
         ${lerp(t, -to.y + from.y, 0)}px,
         0
       )
-      scale(
+      scale3d(
         ${lerp(t, from.width / to.width, 1)},
-        ${lerp(t, from.height / to.height, 1)}
+        ${lerp(t, from.height / to.height, 1)},
+        1
       )
     `
   }

apps/survey/app/src/components/Survey/VotesCast.js

@@ -5,7 +5,7 @@ import { theme, unselectable } from '@aragon/ui'
 import { getOptionColor } from '../../option-utils'
 import springs from '../../springs'
 
-const ANIM_DELAY = 600
+const ANIM_DELAY = 400
 
 class VotesCast extends React.Component {
   getTransform(t) {

apps/survey/app/src/components/SurveyOptions/SurveyOption.js

@@ -18,7 +18,7 @@ class SurveyOption extends React.Component {
           <Bar
             style={{
               width: `${value * 100}%`,
-              transform: showProgress.interpolate(t => `scaleX(${t})`),
+              transform: showProgress.interpolate(t => `scale3d(${t}, 1, 1)`),
             }}
           />
         </BarWrapper>

apps/survey/app/src/components/SurveyOptions/SurveyOptions.js

@@ -4,7 +4,7 @@ import SurveyOption from './SurveyOption'
 import { percentageList } from '../../math-utils'
 
 const ANIM_DELAY_MIN = 100
-const ANIM_DELAY_MAX = 300
+const ANIM_DELAY_MAX = 800
 
 class SurveyOptions extends React.Component {
   static defaultProps = {
@@ -14,35 +14,48 @@ class SurveyOptions extends React.Component {
     animationDelay: { min: ANIM_DELAY_MIN, max: ANIM_DELAY_MAX },
   }
   state = {
-    animate: false,
+    delay: 0,
   }
-  componentDidMount() {
-    const { animationDelay } = this.props
+  constructor(props) {
+    super(props)
+    const { animationDelay } = props
 
     const delay = Number.isInteger(animationDelay)
       ? animationDelay
       : animationDelay.min +
         Math.random() * (animationDelay.max - animationDelay.min)
 
-    // animate after a delay
-    this._transitionTimer = setTimeout(() => {
-      this.setState({ animate: true })
-    }, delay)
+    this.state.delay = delay
   }
-  componentWillUnmount() {
-    clearTimeout(this._transitionTimer)
+  shouldComponentUpdate(nextProps) {
+    const { options } = this.props
+    const { options: nextOptions } = nextProps
+    return this.didOptionsChange(options, nextOptions)
+  }
+  didOptionsChange(options, nextOptions) {
+    if (options.length !== nextOptions.length) {
+      return true
+    }
+    let i = options.length
+    while (i--) {
+      if (options[i].optionId !== nextOptions[i].optionId) {
+        return true
+      }
+    }
+    return false
   }
   render() {
+    const { delay } = this.state
     const {
       options: allOptions,
       optionsDisplayed = allOptions.length,
     } = this.props
-    const { animate } = this.state
 
     const totalVotes = allOptions.reduce(
       (total, option) => total + option.power,
       0
     )
+
     const percentages =
       totalVotes > 0
         ? percentageList(allOptions.map(o => o.power / totalVotes), 2)
@@ -51,8 +64,9 @@ class SurveyOptions extends React.Component {
     const options = allOptions.slice(0, optionsDisplayed)
     return (
       <Trail
+        delay={delay}
         from={{ showProgress: 0 }}
-        to={{ showProgress: Number(animate) }}
+        to={{ showProgress: 1 }}
         keys={options.map(option => option.optionId)}
         native
       >

apps/survey/app/src/components/Surveys/Surveys.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import SurveyCard from '../SurveyCard/SurveyCard'
 
-class Surveys extends React.Component {
+class Surveys extends React.PureComponent {
   static defaultProps = {
     onOpenSurveyDetails: () => {},
     onOpenVotingPanel: () => {},