Lately, I’ve been contributing to the HEP Software Foundation (HSF), specifically working on their Phoenix event display framework. I recently got a pull request merged titled "perf(phoenix-ng): isolate animation loop outside NgZone", and it was one of my favorite fixes so far!
The issue stemmed from how Angular handles change detection. In phoenix-ng, continuous 3D rendering loops were running inside Angular’s NgZone. This meant Angular was checking the entire component tree for updates 60 times a second, causing noticeable frame drops and high CPU usage. My PR wrapped the rendering loop in NgZone.runOutsideAngular(), bypassing unnecessary change detection cycles while keeping the 3D canvas buttery smooth.
The code review was super encouraging. One of the maintainers, Alex, left a friendly comment thanking me for catching the performance bottleneck. They suggested a quick refinement: using zone.run() selectively only when specific UI state changes needed to trigger an Angular re-render. Implementing that feedback made the solution much cleaner.
This contribution taught me a lot about Angular internals, especially how zone.js interacts with browser APIs like requestAnimationFrame. It was incredibly rewarding to see the browser dev tools show a massive drop in scripting time—and even cooler to know I helped make open-source particle physics visualization tools a bit faster for researchers!