Batch UI updates

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"

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$,
   };

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};