update loop from feedback

Author: chiefcll

src/core/platforms/web/WebPlatform.ts

@@ -29,6 +29,7 @@ export class WebPlatform extends Platform {
   override startLoop(stage: Stage): void {
     let isIdle = false;
     let lastFrameTime = 0;
+    const buffer = 4;
 
     const runLoop = (currentTime: number = 0) => {
       const targetFrameTime = stage.targetFrameTime;
@@ -39,7 +40,13 @@ export class WebPlatform extends Platform {
 
         // If not enough time has passed, skip this frame
         if (elapsed < targetFrameTime) {
-          requestAnimationFrame(runLoop);
+          const wait = targetFrameTime - elapsed;
+
+          if (wait > buffer) {
+            setTimeout(() => requestAnimationFrame(runLoop), wait - buffer);
+          } else {
+            requestAnimationFrame(runLoop);
+          }
           return;
         }
 
@@ -56,16 +63,13 @@ export class WebPlatform extends Platform {
         // We still need to calculate the fps else it looks like the app is frozen
         stage.calculateFps();
 
-        if (targetFrameTime > 0) {
-          // Use setTimeout for throttled idle frames
-          setTimeout(
-            () => requestAnimationFrame(runLoop),
-            Math.max(targetFrameTime, 16.666666666666668),
-          );
-        } else {
-          // Use standard idle timeout when not throttling
-          setTimeout(() => requestAnimationFrame(runLoop), 16.666666666666668);
-        }
+        // We use 15ms instead of 16.6ms to provide a safety buffer.
+        // This ensures we wake up slightly before the next frame to check for updates,
+        // preventing us from missing a frame due to timer variances.
+        setTimeout(
+          () => requestAnimationFrame(runLoop),
+          Math.max(targetFrameTime, 15),
+        );
 
         if (isIdle === false) {
           stage.shManager.cleanup();
@@ -86,7 +90,22 @@ export class WebPlatform extends Platform {
       stage.flushFrameEvents();
 
       // Schedule next frame
-      requestAnimationFrame(runLoop);
+      if (targetFrameTime > 0) {
+        const nextTarget = lastFrameTime + targetFrameTime;
+        const now = performance.now();
+        const wait = nextTarget - now;
+
+        // If we have a significant wait time, use setTimeout to yield to the browser.
+        // We subtract a small buffer (4ms) to ensure we wake up BEFORE the next frame.
+        if (wait > buffer) {
+          setTimeout(() => requestAnimationFrame(runLoop), wait - buffer);
+        } else {
+          requestAnimationFrame(runLoop);
+        }
+      } else {
+        // Use standard rAF when not throttling
+        requestAnimationFrame(runLoop);
+      }
     };
     requestAnimationFrame(runLoop);
   }