From 3e92a09e0f76b3b24a59819a0111d5f22794f5bc Mon Sep 17 00:00:00 2001
From: Raphael Amorim <rapha850@gmail.com>
Date: Tue, 21 Jun 2022 19:34:56 +0200
Subject: [PATCH] use requestAnimationFrame (ref #123)

---
 packages/react-ape/renderer/core/render.js    | 26 +++++++++----------
 .../react-ape/renderer/reactApeRenderer.js    |  3 +--
 2 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/packages/react-ape/renderer/core/render.js b/packages/react-ape/renderer/core/render.js
index 0dcd29b..fbf45da 100644
--- a/packages/react-ape/renderer/core/render.js
+++ b/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();
   }
 }
 
diff --git a/packages/react-ape/renderer/reactApeRenderer.js b/packages/react-ape/renderer/reactApeRenderer.js
index a452f22..88ed963 100644
--- a/packages/react-ape/renderer/reactApeRenderer.js
+++ b/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,