OpenCut-app / OpenCut-app/OpenCut
[PERF] Canvas render loop runs even when browser tab is hidden
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 89.8k
- Forks
- 8.9k
- PR merge metrics
- No merged PRs in 30d
Description
Description
In apps/web/src/components/editor/panels/preview/index.tsx (line 169), useRafLoop() calls render EVERY frame without checking if the canvas/tab is visible.
Impact
If the editor tab is hidden/minimized, the render loop continues at 60+ FPS, wasting CPU/GPU resources and battery.
Fix
Use document.visibilityState or IntersectionObserver to pause rendering when the tab isn't visible.
Files
apps/web/src/components/editor/panels/preview/index.tsx:169apps/web/src/hooks/use-raf-loop.ts
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reading apps/web/src/components/editor/panels/preview/index.tsx around line 169 and then inspect apps/web/src/hooks/use-raf-loop.ts to understand how useRafLoop schedules rendering. The change is complete when rendering pauses while the browser tab is hidden and resumes when it becomes visible, without changing visible-tab behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, performance
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 45/100