experimenting with different throttling and rendering approach

e263c4310c6f26b8f266606897dead99a8564859 · Pavel Safronov · 2026-03-14 20:15:31 -0700 · parents 30e810b37a56

experimenting with different throttling and rendering approach

 src/app.js | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/app.js b/src/app.js
index ba73a95..e3af922 100644
--- a/src/app.js
+++ b/src/app.js
@@ -30,7 +30,7 @@ const normalizeSignedAngle = (angle) => {
     const normalized = normalizeAngle(angle);
     return normalized > 180 ? normalized - 360 : normalized;
 };
-const RENDER_INTERVAL_MS = 180;
+const RENDER_INTERVAL_MS = 100;
 const LOCATION_SYNC_INTERVAL_MS = 3000;
 const HEADING_CORRECTION_STORAGE_KEY = 'north-star-heading-correction-deg';
 let headingCorrectionDeg = (() => {
@@ -242,6 +242,7 @@ if (calibrateHeadingLink) {
         selfHeading = normalizeAngle(lastRawHeading + headingCorrectionDeg);
 
         setInviteStatus('North calibrated');
+        requestRender();
     });
 }
 
@@ -355,6 +356,19 @@ async function syncSelfParticipant() {
     }
 }
 
+let renderFrameRequested = false;
+const requestRender = () => {
+    if (renderFrameRequested) {
+        return;
+    }
+
+    renderFrameRequested = true;
+    requestAnimationFrame(() => {
+        renderFrameRequested = false;
+        render();
+    });
+};
+
 let lastLocationSyncAt = 0;
 const maybeSyncLocation = () => {
     const now = Date.now();
@@ -385,6 +399,7 @@ const applySelfName = async (rawName) => {
     localStorage.setItem(NAME_STORAGE_KEY, nextName);
     if (selfNameInput) selfNameInput.value = nextName;
     await syncSelfParticipant();
+    requestRender();
 };
 
 const applySelfColor = async (rawColor) => {
@@ -399,6 +414,7 @@ const applySelfColor = async (rawColor) => {
     localStorage.setItem(COLOR_STORAGE_KEY, nextColor);
     if (selfColorInput) selfColorInput.value = nextColor;
     await syncSelfParticipant();
+    requestRender();
 };
 
 if (nameForm) {
@@ -426,6 +442,7 @@ navigator.geolocation.watchPosition(async (pos) => {
     selfPosition.lon = pos.coords.longitude;
     selfParticipant.position = { ...selfPosition };
     maybeSyncLocation();
+    requestRender();
 }, (err) => {
     console.error('Error getting geolocation', err);
 });
@@ -463,6 +480,7 @@ window.addEventListener('deviceorientationabsolute', (event) => {
     hasAbsoluteOrientation = true;
     lastRawHeading = heading;
     selfHeading = normalizeAngle(heading + headingCorrectionDeg);
+    requestRender();
 });
 
 window.addEventListener('deviceorientation', (event) => {
@@ -473,6 +491,7 @@ window.addEventListener('deviceorientation', (event) => {
 
     lastRawHeading = heading;
     selfHeading = normalizeAngle(heading + headingCorrectionDeg);
+    requestRender();
 });
 
 const participantsRef = ref(db, `rooms/${roomId}/participants`);
@@ -496,6 +515,7 @@ onValue(participantsRef, (snapshot) => {
 
     console.debug('Updated participants array:', participants);
     renderParticipantControls();
+    requestRender();
 });
 
 const renderParticipantControls = () => {