diff --git a/src/components/MeasureHeight.jsx b/src/components/MeasureHeight.jsx index 5887b2b..e1b3023 100644 --- a/src/components/MeasureHeight.jsx +++ b/src/components/MeasureHeight.jsx @@ -1,7 +1,7 @@ -import React, { Component, PropTypes } from 'react'; +import React, { PureComponent, PropTypes } from 'react'; import ReactDOM from 'react-dom'; -import { omit } from 'functions'; +import { omit, rAF } from 'functions'; /** * MeasureHeight is a component that allows you to measure the height of elements wrapped. @@ -23,7 +23,7 @@ import { omit } from 'functions'; * */ -export default class MeasureHeight extends Component { +export default class MeasureHeight extends PureComponent { static displayName = 'MeasureHeight'; static propTypes = { shouldMeasure: PropTypes.func, @@ -55,6 +55,6 @@ export default class MeasureHeight extends Component { } measure() { - this.props.onMeasure(this.el.offsetHeight); + rAF(() => this.props.onMeasure(this.el.offsetHeight)); } } diff --git a/src/components/ui/form/Form.jsx b/src/components/ui/form/Form.jsx index 98ce970..fb7d648 100644 --- a/src/components/ui/form/Form.jsx +++ b/src/components/ui/form/Form.jsx @@ -46,7 +46,9 @@ export default class Form extends Component { }); } - if (typeof nextProps.isLoading !== 'undefined') { + if (typeof nextProps.isLoading !== 'undefined' + && nextProps.isLoading !== this.state.isLoading + ) { this.setState({ isLoading: nextProps.isLoading }); diff --git a/src/components/ui/scrollTo.js b/src/components/ui/scrollTo.js index 97859b7..5f6d809 100644 --- a/src/components/ui/scrollTo.js +++ b/src/components/ui/scrollTo.js @@ -4,34 +4,35 @@ * @see http://ariya.ofilabs.com/2013/11/javascript-kinetic-scrolling-part-2.html */ -const requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame - || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; +import { rAF } from 'functions'; const TIME_CONSTANT = 100; // heigher numbers - slower animation export default function scrollTo(y, viewPort) { const start = Date.now(); - const {scrollTop} = viewPort; - const amplitude = y - scrollTop; let scrollWasTouched = false; + rAF(() => { // wrap in rAF to optimize initial reading of scrollTop + const {scrollTop} = viewPort; + const amplitude = y - scrollTop; - requestAnimationFrame(function animateScroll() { - const elapsed = Date.now() - start; + (function animateScroll() { + const elapsed = Date.now() - start; - let delta = -amplitude * Math.exp(-elapsed / TIME_CONSTANT); + let delta = -amplitude * Math.exp(-elapsed / TIME_CONSTANT); - if (Math.abs(delta) > 0.5 && !scrollWasTouched) { - requestAnimationFrame(animateScroll); - } else { - delta = 0; - document.removeEventListener('mousewheel', markScrollTouched); - document.removeEventListener('touchstart', markScrollTouched); - } + if (Math.abs(delta) > 0.5 && !scrollWasTouched) { + rAF(animateScroll); + } else { + delta = 0; + document.removeEventListener('mousewheel', markScrollTouched); + document.removeEventListener('touchstart', markScrollTouched); + } - if (scrollWasTouched) { - return; - } + if (scrollWasTouched) { + return; + } - viewPort.scrollTop = y + delta; + viewPort.scrollTop = y + delta; + }()); }); document.addEventListener('mousewheel', markScrollTouched); diff --git a/src/functions.js b/src/functions.js index e595903..01bd108 100644 --- a/src/functions.js +++ b/src/functions.js @@ -40,3 +40,6 @@ export function loadScript(src) { document.body.appendChild(script); }); } + +export const rAF = window.requestAnimationFrame || window.mozRequestAnimationFrame + || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; diff --git a/src/index.js b/src/index.js index 82a173e..df24383 100644 --- a/src/index.js +++ b/src/index.js @@ -61,7 +61,7 @@ function restoreScroll() { } scrollTo(y, viewPort); - }, 100); + }, 200); } function stopLoading() {