perf(Visibility): use RAF

Semantic-Org · Aug 29, 2017 · 8bab0a1 · 8bab0a1
1 parent e1ff28a
commit 8bab0a1
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 18 deletions.
diff --git a/src/behaviors/Visibility/Visibility.js b/src/behaviors/Visibility/Visibility.js
@@ -272,9 +272,17 @@ export default class Visibility extends Component {
     })
   }
 
+  handleScroll = () => {
+    if (this.ticking) return
+
+    this.ticking = true
+    requestAnimationFrame(() => this.handleUpdate())
+  }
+
   handleRef = c => (this.ref = c)
 
-  handleScroll = () => {
+  handleUpdate = () => {
+    this.ticking = false
     const { bottom, height, top, width } = this.ref.getBoundingClientRect()
 
     const topPassed = top < 0

diff --git a/test/specs/behaviors/Visibility/Visibility-test.js b/test/specs/behaviors/Visibility/Visibility-test.js
@@ -95,29 +95,23 @@ const expectations = [{
 describe('Visibility', () => {
   common.isConformant(Visibility)
 
-  beforeEach(() => {
-    wrapper = undefined
+  let requestAnimationFrame
+
+  before(() => {
+    requestAnimationFrame = window.requestAnimationFrame
+    window.requestAnimationFrame = fn => fn()
   })
 
-  afterEach(() => {
-    if (wrapper && wrapper.unmount) wrapper.unmount()
+  after(() => {
+    window.requestAnimationFrame = requestAnimationFrame
   })
 
-  it('should use window as default scroll context', () => {
-    const onUpdate = sandbox.spy()
-    mount(<Visibility onUpdate={onUpdate} />)
-    window.dispatchEvent(new Event('scroll'))
-    onUpdate.should.have.been.called()
+  beforeEach(() => {
+    wrapper = undefined
   })
 
-  it('should set a scroll context', () => {
-    const div = document.createElement('div')
-    const onUpdate = sandbox.spy()
-    mount(<Visibility onUpdate={onUpdate} context={div} />)
-    window.dispatchEvent(new Event('scroll'))
-    onUpdate.should.not.have.been.called()
-    div.dispatchEvent(new Event('scroll'))
-    onUpdate.should.have.been.called()
+  afterEach(() => {
+    if (wrapper && wrapper.unmount) wrapper.unmount()
   })
 
   describe('calculations', () => {
@@ -185,6 +179,28 @@ describe('Visibility', () => {
     })
   })
 
+  describe('context', () => {
+    it('should use window as default scroll context', () => {
+      const onUpdate = sandbox.spy()
+      mount(<Visibility onUpdate={onUpdate} />)
+
+      window.dispatchEvent(new Event('scroll'))
+      onUpdate.should.have.been.called()
+    })
+
+    it('should set a scroll context', () => {
+      const div = document.createElement('div')
+      const onUpdate = sandbox.spy()
+      mount(<Visibility onUpdate={onUpdate} context={div} />)
+
+      window.dispatchEvent(new Event('scroll'))
+      onUpdate.should.not.have.been.called()
+
+      div.dispatchEvent(new Event('scroll'))
+      onUpdate.should.have.been.called()
+    })
+  })
+
   describe('onPassed', () => {
     it('fires callback when pixels passed', () => {
       const onPassed = {