diff --git a/package.json b/package.json index cbf4cc7..1b3950f 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "@cycle/history": "^1.1.0", "@cycle/isolate": "1.2.x", "@cycle/storage": "^2.0.3", + "raf": "^3.2.0", "rx": "4.0.7", "todomvc-app-css": "2.0.3", "todomvc-common": "1.0.1" diff --git a/src/components/Todos/index.js b/src/components/Todos/index.js index 95182f5..80667b0 100644 --- a/src/components/Todos/index.js +++ b/src/components/Todos/index.js @@ -6,6 +6,7 @@ import view from './view'; import deserialize from './storage-source'; import serialize from './storage-sink'; import TodoItem from '../TodoItem'; +import {batchUpdate} from '../../utils' // AMEND STATE WITH CHILDREN // This function creates the projection function @@ -87,7 +88,7 @@ function Todos({DOM, History, storage}) { // Write the virtual dom stream to the DOM and write the // storage stream to localStorage. return { - DOM: view(amendedState$), + DOM: batchUpdate(view(amendedState$)), History: actions.url$, storage: storage$, }; diff --git a/src/utils.js b/src/utils.js index c2d9a49..23704ca 100644 --- a/src/utils.js +++ b/src/utils.js @@ -1,3 +1,6 @@ +import {Observable} from 'rx' +import raf from 'raf' + class PropertyHook { constructor(fn) { this.fn = fn; @@ -15,4 +18,14 @@ function propHook(fn) { const ENTER_KEY = 13; const ESC_KEY = 27; -export {propHook, ENTER_KEY, ESC_KEY}; +function batchUpdate (dom$) { + return dom$ + .flatMapLatest(dom => Observable + .fromEventPattern( + callback => raf(() => callback(dom)), + (_, handler) => raf.cancel(handler) + ).first() + ) +} + +export {propHook, batchUpdate, ENTER_KEY, ESC_KEY};