fix(RB-3031): RobotAnimator not updating on motion state prop change (#470)

When introduced into the current state of the RobotPad, the
V2-Type-based RobotAnimator did not update the robot position on motion
state change. It worked setting the position during initalization
though.

The file change fixes the bug, allowing the robot visualization to
behave accordingly

Before (.mov video)

https://github.com/user-attachments/assets/8d56e3ac-0d8d-49b7-96ea-0d8c858c54dd

After (.mov video)

https://github.com/user-attachments/assets/1beeada9-6f7d-4cde-8cec-f1d6f7556b06

Author: MarcinSzalomski

src/components/robots/RobotAnimator.tsx

@@ -1,6 +1,6 @@
 import { useFrame, useThree } from "@react-three/fiber"
 import type { DHParameter, MotionGroupState } from "@wandelbots/nova-js/v2"
-import React, { useEffect, useRef } from "react"
+import React, { useEffect, useRef, useCallback } from "react"
 import type { Group, Object3D } from "three"
 import { useAutorun } from "../utils/hooks"
 import { ValueInterpolator } from "../utils/interpolation"
@@ -64,11 +64,6 @@ export default function RobotAnimator({
     invalidate()
   }
 
-  function updateJoints(newJointValues: number[]) {
-    jointValues.current = newJointValues
-    interpolatorRef.current?.setTarget(newJointValues)
-  }
-
   function setRotation() {
     const updatedJointValues = interpolatorRef.current?.getCurrentValues() || []
 
@@ -86,13 +81,24 @@ export default function RobotAnimator({
     }
   }
 
-  useAutorun(() => {
+  const updateJoints = useCallback(() => {
     const newJointValues = rapidlyChangingMotionState.joint_position.filter(
       (item) => item !== undefined,
     )
 
-    requestAnimationFrame(() => updateJoints(newJointValues))
-  })
+    jointValues.current = newJointValues
+    interpolatorRef.current?.setTarget(newJointValues)
+  }, [rapidlyChangingMotionState])
+
+  /**
+   * Fire an update joints call on every motion state change.
+   * requestAnimationFrame used to avoid blocking main thread
+   */
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      updateJoints()
+    })
+  }, [rapidlyChangingMotionState, updateJoints])
 
   return <group ref={setGroupRef}>{children}</group>
 }