use requestAnimationFrame (ref #123)

Author: raphamorim

packages/react-ape/renderer/core/render.js

@@ -22,20 +22,20 @@ function renderApeQueue(
   onFinish: () => mixed
 ) {
   if (apeContextGlobal && apeContextGlobal.renderQueue.length) {
-    // const renderFrame = () => {
-    //   requestAnimationFrame(renderFrame);
-    //   apeContextGlobal.renderQueue.forEach(element => {
-    //     // element.render(apeContextGlobal, element.parentLayout)
-    //     renderApeElement(apeContextGlobal, element);
-    //   });
-    //   cancelAnimationFrame(renderFrame);
-    // }
-    // renderFrame();
+    const queue = apeContextGlobal.renderQueue;
+    const frame = () => {
+      requestAnimationFrame(frame);
+      const element = queue.shift();
+      element.render(apeContextGlobal, element.parentLayout);
 
-    apeContextGlobal.renderQueue.forEach(element => {
-      renderApeElement(apeContextGlobal, element);
-    });
-    onFinish();
+      requestAnimationFrame(frame);
+
+      if (!queue.length) {
+        cancelAnimationFrame(frame);
+        onFinish();
+      }
+    }
+    frame();
   }
 }
 

packages/react-ape/renderer/reactApeRenderer.js

@@ -164,7 +164,6 @@ const ReactApeFiber = reconciler({
     // resetAfterCommit happens only for children changes
     renderQueue(apeContextGlobal, () => {
       apeContextGlobal.setSurfaceHeight(0);
-      apeContextGlobal.renderQueue = [];
     });
   },
 
@@ -187,7 +186,7 @@ const ReactApeFiber = reconciler({
   schedulePassiveEffects: FrameSchedulingScheduleDeferredCallback,
   cancelPassiveEffects: FrameSchedulingCancelDeferredCallback,
   noTimeout: -1,
-  useSyncScheduling: true,
+  useSyncScheduling: false,
   now: FrameSchedulingNow,
   isPrimaryRenderer: true,
   supportsMutation: true,