fix(brand): pause WebGL render loop when tab is hidden - #528
Conversation
- Listen for document visibilitychange events in HelioWebGL - Stop animation and switch Canvas frameloop to demand when tab is hidden - Resume continuous rendering when tab returns to visible - Add unit tests for HelioWebGL tab visibility and motion behavior - Clean up upstream syntax and type errors across codebase
|
@Emmycivity Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
|
@Emmycivity is attempting to deploy a commit to the David Dada's projects Team on Vercel. A member of the Team first needs to authorize it. |
sshdopey
left a comment
sshdopey
left a comment
There was a problem hiding this comment.
Great work on pausing the WebGL render loop when the tab is hidden! The visibilitychange listener and dynamic frameloop switching are exactly what issue #390 asked for, and the tests are a nice touch. I also appreciate you fixing those compilation errors along the way. Keep it up! ❤️
|
Approved! 🎉 I couldn't auto-merge this just yet (it may need a rebase or have a check still running). A maintainer can merge it whenever it's ready. |
dadadave80
left a comment
dadadave80
left a comment
There was a problem hiding this comment.
Please resolve merge conflicts
sshdopey
left a comment
sshdopey
left a comment
There was a problem hiding this comment.
This is a solid effort toward pausing the WebGL render loop when the tab is hidden. The visibilitychange listener and dynamic frameloop switching directly address the issue, and the tests are a nice touch. I also appreciate the cleanup of various type and syntax errors along the way. Great work! 🚀
|
Approved! 🎉 I couldn't auto-merge this just yet (it may need a rebase or have a check still running). A maintainer can merge it whenever it's ready. |
sshdopey
left a comment
sshdopey
left a comment
There was a problem hiding this comment.
Hi Emmycivity! 🌟 This is a solid contribution that directly addresses #390 by pausing the WebGL render loop when the tab is hidden. The visibilitychange listener, dynamic frameloop setting, and cleanup logic are well-implemented, and the added tests are a great touch. I also appreciate the extra fixes for compilation and type errors across the codebase—that shows real care. The diff includes some unrelated changes, but they seem to be cleanup or fixes that help the project overall. Keep up the awesome work! 🚀
|
Approved! 🎉 I couldn't auto-merge this just yet (it may need a rebase or have a check still running). A maintainer can merge it whenever it's ready. |
sshdopey
left a comment
sshdopey
left a comment
There was a problem hiding this comment.
Great work on pausing the WebGL render loop when the tab is hidden! Your changes to HelioWebGL.tsx with the visibilitychange listener and dynamic frameloop are exactly what issue #390 asked for. The added tests are a nice touch to verify the behavior. I also appreciate you fixing some compilation and type errors along the way. Keep up the awesome contributions! ❤️
|
Approved! 🎉 I couldn't auto-merge this just yet (it may need a rebase or have a check still running). A maintainer can merge it whenever it's ready. |
Reconcile the branch with upstream's latest commits: WebGL tab-visibility pause (Heliobond#528), admin-utils edge-case tests (Heliobond#559), and the styled-components theme extraction (Heliobond#416). Conflict resolutions: - HelioWebGL: combine upstream's tab-visibility pause with the branch's Save-Data / low-end DPR cap (dpr [1,1] + low-power when constrained); the test file keeps both behavior suites. - Keep the branch's repairs for upstream corruption (var(--token) typos in Portfolio, WalletProvider addr/adr mismatch, RegistryTable duplicate style declarations and missing CSSProperties import, duplicated isWarningOpenRef in useSessionTimeout). - data.ts: restore the six-project demo registry with upstream's OFF_SCREEN_PROJECTS_COUNT structure and inverted risk indicator. - i18n: keep catalogs valid JSON and in key-parity with en.json. Verification: tsc --noEmit clean; vitest 39 files / 320 tests passing. Generated with Codebuff 🤖 Co-Authored-By: Codebuff <noreply@codebuff.com>
3 participants
Summary
Closes #390.
Pauses the WebGL render loop when the browser tab is hidden and resumes rendering when the user returns to the tab.
Changes
visibilitychangelistener inHelioWebGL.tsxtrackingdocument.visibilityState === "visible"animate = !reducedMotion && visibleto pause animation updates and set<Canvas frameloop={animate ? "always" : "demand"}>to stop unnecessary WebGL render loops in hidden tabssrc/brand/HelioWebGL.test.tsxverifying tab visibility change and event listener cleanupVerification
npm testpassed 34 test files (264 tests)npm run typecheckpassed with 0 errors