Describe the bug
The OrbitItem component is using setInterval and useState to drive the animation frame-by-frame in JavaScript. This causes an infinite loop of re-renders (every duration ms). Specifically, for every item in the orbit, React is recalculating trigonometric functions and updating the inline styles manually, which leads to heavy CPU usage and unnecessary DOM updates.
Expected behavior
The animation should be delegated to the CSS engine using @keyframes. This would:
1- Eliminate the need for useState and setInterval.
2- Reduce the re-render count to zero after the initial mount.
3- Smooth out the animation by using GPU acceleration (via transform).
Additional context
The current implementation manually calculates x, y, scale, and opacity using Math functions on every frame. Moving this to a CSS-based approach would achieve the same visual effect with almost zero performance cost.
Describe the bug
The
OrbitItemcomponent is usingsetIntervalanduseStateto drive the animation frame-by-frame in JavaScript. This causes an infinite loop of re-renders (everydurationms). Specifically, for every item in the orbit, React is recalculating trigonometric functions and updating the inline styles manually, which leads to heavy CPU usage and unnecessary DOM updates.Expected behavior
The animation should be delegated to the CSS engine using
@keyframes. This would:1- Eliminate the need for
useStateandsetInterval.2- Reduce the re-render count to zero after the initial mount.
3- Smooth out the animation by using GPU acceleration (via
transform).Additional context
The current implementation manually calculates
x,y,scale, andopacityusing Math functions on every frame. Moving this to a CSS-based approach would achieve the same visual effect with almost zero performance cost.