perf: stop re-subscribing the replay render loop every frame

[Anexus5919]

📌 Related Issue

Fixes #869

---

📝 Description

The requestAnimationFrame render-loop useEffect in Replay3DModel.tsx had currentFrameIdx in its dependency array, and the loop advances currentFrameIdx (setCurrentFrameIdx) on every playback step. So on every frame the effect tore down (cancelAnimationFrame) and re-subscribed (requestAnimationFrame), rebuilding the renderLoop closure. The other dependencies are memoized/stable, so currentFrameIdx was the only one changing during playback.

🔹 What has been changed?

• src/components/Replay3DModel.tsx: the loop now reads the frame index from a ref (currentFrameIdxRef, kept current by a small dedicated effect) instead of the closure-captured currentFrameIdx, and currentFrameIdx is removed from the render-loop effect's dependency array. The loop is now set up once (re-subscribing only when frames/isPlaying/modelLoaded/etc. actually change).

🔹 Why are these changes needed?

• Re-subscribing the RAF loop every frame is wasteful (effect cleanup/setup, closure rebuild, full dependency comparison per frame). The loop already advanced playback via frameFloatRef, so currentFrameIdx did not need to be a reactive dependency; reading it from an always-current ref preserves behaviour (including the paused/scrub render) while setting the loop up once.

---

🛠️ Type of Change

• ⚡ Performance Improvement

---

🧪 Testing

✅ Tests Performed

• Tested locally
• npx tsc --noEmit: Replay3DModel.tsx is clean (the only pre-existing tsc errors are in exerciseEngine.ts, unrelated).
• npx eslint src/components/Replay3DModel.tsx: 0 problems — importantly, no react-hooks/exhaustive-deps warning, confirming the effect no longer references currentFrameIdx (all uses go through the ref).
• Reviewed behaviour: during playback the loop renders from frameFloatRef (unchanged); when paused/scrubbing it renders currentFrameIdxRef.current, which the small sync effect keeps current — so the displayed frame is the same, without the per-frame re-subscribe.

🔹 Note on automated tests

No runtime unit test is included: the loop is a WebGL requestAnimationFrame loop inside a large Three.js component, which is not feasible to unit test without a full WebGL + DOM harness. Verification is by tsc, eslint (exhaustive-deps), and a behaviour review.

🌐 Browsers Tested

Not applicable (render-loop lifecycle change).

---

📷 Screenshots / Demo (if applicable)

Not applicable.

---

📋 Checklist

• I have read the project's CONTRIBUTING guidelines
• My code follows the project style guidelines
• I have performed a self-review of my code
• I have tested my changes locally
• I have added/updated documentation where necessary (not applicable)
• My changes do not introduce new warnings or errors
• This PR is linked to an existing issue

---

💬 Additional Notes

Branched from latest upstream/main (5464425). Small, self-contained change (6 insertions, 4 deletions).

[vercel]

@Anexus5919 is attempting to deploy a commit to the somiljain2024-4175's projects Team on Vercel.

A member of the Team first needs to authorize it.

[Anexus5919]

@Somil450 @diksha78dev Kindly have a review on this pr. Thanks!